import Link from "next/link";

import {
  AdminPageHeader,
  EmptyTableState,
  FilterBar,
  SearchField,
  SelectFilter,
  StatusBadge,
  TablePanel,
} from "@/components/admin/admin-ui";
import { getAdminFamilies } from "@/lib/admin-data";
import { formatAdminDate } from "@/lib/admin-format";

type FamiliesPageProps = {
  searchParams: Promise<{
    search?: string;
    status?: string;
    profiles?: string;
  }>;
};

export default async function AdminFamiliesPage({
  searchParams,
}: FamiliesPageProps) {
  const filters = await searchParams;
  const families = await getAdminFamilies(filters);

  return (
    <div className="flex h-full min-h-[42rem] flex-col">
      <AdminPageHeader
        eyebrow="Families"
        title="Parent accounts, safely organised."
        description="Confirm account relationships and activity without exposing child medical details in the directory."
        action={
          <div className="hidden items-center gap-1.5 rounded-full border border-emerald-200/80 bg-emerald-50/80 px-3 py-1.5 text-xs font-semibold text-emerald-700 sm:flex">
            <span className="material-symbols-outlined text-[16px]">
              shield_person
            </span>
            Privacy-safe view
          </div>
        }
      />

      <FilterBar resetHref="/admin/families">
        <SearchField
          defaultValue={filters.search}
          placeholder="Search parent, email or postcode"
        />

        <SelectFilter
          name="status"
          label="Account status"
          value={filters.status}
          options={[
            { value: "all", label: "All accounts" },
            { value: "pending", label: "Pending" },
            { value: "active", label: "Active" },
            { value: "suspended", label: "Suspended" },
            { value: "archived", label: "Archived" },
          ]}
        />

        <SelectFilter
          name="profiles"
          label="Child profiles"
          value={filters.profiles}
          options={[
            { value: "all", label: "Any family setup" },
            { value: "with-children", label: "Has child profile" },
            { value: "without-children", label: "No child profile" },
          ]}
        />
      </FilterBar>

      <TablePanel count={families.length} label={families.length === 1 ? "family" : "families"}>
        {families.length === 0 ? (
          <EmptyTableState
            icon="family_restroom"
            title="No parent accounts match"
            description="Try a broader account or profile filter to find the family you need."
          />
        ) : (
          <>
            {/* MOBILE VIEW (< md): Responsive Stacked Cards */}
            <div className="divide-y divide-slate-100 md:hidden">
              {families.map((family) => (
                <div key={family.id} className="p-4 space-y-3 hover:bg-slate-50/60 transition-colors">
                  <div className="flex items-start justify-between gap-3">
                    <div>
                      <h3 className="text-sm font-extrabold text-[#0D1B2A]">{family.parentName}</h3>
                      <p className="text-xs text-slate-500">{family.email}</p>
                    </div>
                    <StatusBadge value={family.status} />
                  </div>

                  <div className="grid grid-cols-2 gap-2 text-xs text-slate-600 pt-1">
                    <div className="flex items-center gap-1.5">
                      <span className="material-symbols-outlined text-[15px] text-slate-400">location_on</span>
                      <span>{family.location}</span>
                    </div>
                    <div className="flex items-center gap-1.5">
                      <span className="material-symbols-outlined text-[15px] text-slate-400">family_restroom</span>
                      <span>{family.childCount} children</span>
                    </div>
                  </div>

                  <div className="flex items-center justify-between pt-2 border-t border-slate-100 text-xs">
                    <span className="text-[11px] text-slate-500">
                      {family.registrationCount} bookings · Last login {formatAdminDate(family.lastLoginAt, true)}
                    </span>
                    <Link
                      href={`/admin/families/${family.id}`}
                      className="inline-flex items-center gap-1 rounded-xl bg-slate-100 hover:bg-[#1D4ED8] hover:text-white px-3 py-1.5 text-xs font-semibold text-slate-700 transition"
                    >
                      Manage
                      <span className="material-symbols-outlined text-[15px]">arrow_forward</span>
                    </Link>
                  </div>
                </div>
              ))}
            </div>

            {/* DESKTOP VIEW (>= md): Clean Data Table */}
            <table className="hidden md:table w-full border-separate border-spacing-0 text-left">
              <thead className="sticky top-0 z-10 bg-slate-50/95 text-[10px] font-extrabold uppercase tracking-wider text-slate-500 border-b border-slate-200/80 backdrop-blur-xl">
                <tr>
                  <th className="px-5 py-3.5">Parent account</th>
                  <th className="px-4 py-3.5">Location</th>
                  <th className="px-4 py-3.5">Child profiles</th>
                  <th className="px-4 py-3.5">Registrations</th>
                  <th className="px-4 py-3.5">Last login</th>
                  <th className="px-4 py-3.5 text-right">Account</th>
                  <th className="px-5 py-3.5 text-right">Actions</th>
                </tr>
              </thead>

              <tbody className="divide-y divide-slate-100">
                {families.map((family) => (
                  <tr
                    key={family.id}
                    className="transition hover:bg-slate-50/70"
                  >
                    <td className="px-5 py-3.5">
                      <p className="text-sm font-extrabold text-[#0D1B2A]">
                        {family.parentName}
                      </p>
                      <p className="mt-0.5 text-xs text-slate-500">
                        {family.email}
                      </p>
                    </td>

                    <td className="px-4 py-3.5 text-xs font-semibold text-slate-600">
                      {family.location}
                    </td>

                    <td className="px-4 py-3.5 text-xs font-extrabold text-[#0D1B2A]">
                      {family.childCount}
                    </td>

                    <td className="px-4 py-3.5 text-xs font-extrabold text-[#0D1B2A]">
                      {family.registrationCount}
                    </td>

                    <td className="px-4 py-3.5 text-xs text-slate-500">
                      {formatAdminDate(family.lastLoginAt, true)}
                    </td>

                    <td className="px-4 py-3.5 text-right">
                      <StatusBadge value={family.status} />
                    </td>

                    <td className="px-5 py-3.5 text-right">
                      <Link
                        href={`/admin/families/${family.id}`}
                        className="inline-flex items-center gap-1 text-xs font-semibold text-[#1D4ED8] transition hover:text-[#1e40af]"
                      >
                        Manage
                        <span className="material-symbols-outlined text-[16px]">arrow_forward</span>
                      </Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </>
        )}
      </TablePanel>
    </div>
  );
}