"use client";

import { useRouter, usePathname, useSearchParams } from "next/navigation";
import { Badge } from "@/components/ui/Badge";
import type { AdminSurveyRow } from "@/lib/queries/admin-queries";
import type { SurveyStatus } from "@/types";

interface AdminSurveysTableProps {
  surveys: AdminSurveyRow[];
}

export function AdminSurveysTable({ surveys }: AdminSurveysTableProps) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  function updateParams(key: string, value: string) {
    const params = new URLSearchParams(searchParams.toString());
    if (value) params.set(key, value);
    else params.delete(key);
    router.push(`${pathname}?${params.toString()}`);
  }

  return (
    <div>
      <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex flex-wrap gap-2">
          {(["all", "active", "draft", "closed"] as const).map((s) => (
            <button
              key={s}
              type="button"
              onClick={() => updateParams("status", s === "all" ? "" : s)}
              className={`rounded-full px-3 py-1.5 text-xs font-semibold capitalize transition-colors ${
                (searchParams.get("status") ?? "all") === s ||
                (s === "all" && !searchParams.get("status"))
                  ? "bg-primary text-white"
                  : "border border-border bg-white text-muted"
              }`}
            >
              {s}
            </button>
          ))}
        </div>
        <input
          type="search"
          placeholder="Search surveys..."
          defaultValue={searchParams.get("search") ?? ""}
          onChange={(e) => updateParams("search", e.target.value)}
          className="w-full rounded-sm border border-border px-3 py-2 text-sm sm:max-w-[240px]"
        />
      </div>

      <div className="overflow-x-auto rounded-lg border border-border bg-card shadow">
        <table className="w-full min-w-[560px] text-left text-sm">
          <thead>
            <tr className="border-b border-border bg-bg/50 text-xs font-semibold text-muted">
              <th className="px-4 py-3">Survey</th>
              <th className="px-4 py-3">Client</th>
              <th className="px-4 py-3">Status</th>
              <th className="px-4 py-3">Responses</th>
              <th className="px-4 py-3">Created</th>
            </tr>
          </thead>
          <tbody>
            {surveys.length === 0 ? (
              <tr>
                <td colSpan={5} className="px-4 py-10 text-center text-muted">
                  No surveys found.
                </td>
              </tr>
            ) : (
              surveys.map((s) => (
                <tr
                  key={s.id}
                  className="border-b border-border/60 last:border-0 hover:bg-bg/40"
                >
                  <td className="max-w-[240px] truncate px-4 py-3 font-medium">
                    {s.title}
                  </td>
                  <td className="px-4 py-3 text-muted">{s.workspaceName}</td>
                  <td className="px-4 py-3">
                    <Badge status={s.status as SurveyStatus} />
                  </td>
                  <td className="px-4 py-3 font-mono text-xs">
                    {s.responseCount.toLocaleString()}
                  </td>
                  <td className="px-4 py-3 text-xs text-muted">
                    {s.createdAt.toLocaleDateString("en-US", {
                      month: "short",
                      day: "numeric",
                      year: "numeric",
                    })}
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}