"use client";

import { FormEvent, Suspense, useEffect, useState } from "react";
import Link from "next/link";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { AdminActionLink } from "@/components/admin/AdminActionLink";
import { AdminDataTable } from "@/components/admin/AdminDataTable";
import {
  AdminFilterBar,
  AdminFilterField,
  adminFilterInputClassName,
} from "@/components/admin/AdminFilterBar";
import { AdminPageIntro } from "@/components/admin/AdminPageIntro";
import { AdminPagination } from "@/components/admin/AdminPagination";
import { AdminShell } from "@/components/admin/AdminShell";
import { AdminStatusBadge } from "@/components/admin/AdminStatusBadge";
import { AdminTableSkeleton } from "@/components/admin/AdminTableSkeleton";
import { ErrorState } from "@/components/ui/ErrorState";
import { ApiError } from "@/lib/api";
import {
  buildAdminListQuery,
  parseAdminEnumParam,
  parseAdminIdParam,
  parseAdminPage,
} from "@/lib/admin-list-query";
import { adminApi, formatAdminDate } from "@/lib/api/admin";
import type { AdminDeliverableListItem, AdminPaginationMeta } from "@/types/admin";

const DELIVERABLE_STATUSES = [
  "pending",
  "submitted",
  "revision_requested",
  "approved",
] as const;

function SafeExternalLink({ href, children }: { href: string; children: string }) {
  let safe = false;
  try {
    const url = new URL(href);
    safe = url.protocol === "https:" || url.protocol === "http:";
  } catch {
    safe = false;
  }

  if (!safe) {
    return <span className="text-ink-40">Invalid URL</span>;
  }

  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      className="break-all text-primary underline-offset-2 hover:underline"
    >
      {children}
    </a>
  );
}

export function AdminDeliverablesPage() {
  return (
    <AdminShell title="Deliverables" subtitle="Submissions (read-only)">
      {() => (
        <Suspense fallback={<AdminTableSkeleton columns={8} />}>
          <DeliverablesContent />
        </Suspense>
      )}
    </AdminShell>
  );
}

function DeliverablesContent() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const urlStatus = parseAdminEnumParam(searchParams.get("status"), DELIVERABLE_STATUSES);
  const urlCampaignId = parseAdminIdParam(searchParams.get("campaign_id"));
  const urlCreatorProfileId = parseAdminIdParam(searchParams.get("creator_profile_id"));
  const urlPage = parseAdminPage(searchParams.get("page"));

  const [status, setStatus] = useState(urlStatus);
  const [rows, setRows] = useState<AdminDeliverableListItem[]>([]);
  const [meta, setMeta] = useState<AdminPaginationMeta | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setStatus(urlStatus);
  }, [urlStatus]);

  useEffect(() => {
    let cancelled = false;

    async function load() {
      setLoading(true);
      setError(null);
      try {
        const result = await adminApi.listDeliverables({
          page: urlPage,
          status: urlStatus || undefined,
          campaign_id: urlCampaignId,
          creator_profile_id: urlCreatorProfileId,
        });
        if (cancelled) return;
        setRows(result.deliverables);
        setMeta(result.meta);
      } catch (err) {
        if (cancelled) return;
        setError(err instanceof ApiError ? err.message : "Unable to load deliverables.");
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    void load();
    return () => {
      cancelled = true;
    };
  }, [urlStatus, urlCampaignId, urlCreatorProfileId, urlPage]);

  function replaceQuery(next: {
    status?: string;
    campaign_id?: number | null;
    creator_profile_id?: number | null;
    page?: number;
  }) {
    const campaignId = next.campaign_id !== undefined ? next.campaign_id : urlCampaignId;
    const creatorId =
      next.creator_profile_id !== undefined ? next.creator_profile_id : urlCreatorProfileId;

    const query = buildAdminListQuery({
      status: next.status !== undefined ? next.status : urlStatus,
      campaign_id: campaignId ?? undefined,
      creator_profile_id: creatorId ?? undefined,
      page: next.page !== undefined ? next.page : urlPage,
    });
    router.replace(`${pathname}${query}`, { scroll: false });
  }

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    replaceQuery({ status, page: 1 });
  }

  function handleReset() {
    setStatus("");
    router.replace(pathname, { scroll: false });
  }

  const filterNote = [
    urlCampaignId ? `campaign #${urlCampaignId}` : null,
    urlCreatorProfileId ? `creator profile #${urlCreatorProfileId}` : null,
  ]
    .filter(Boolean)
    .join(", ");

  return (
    <div className="space-y-5">
      <AdminPageIntro description="Read-only deliverable and submission visibility. Approval and editing stay with brands and creators." />

      {filterNote ? (
        <p className="text-[0.8125rem] text-ink-60">
          Filtered by {filterNote}.{" "}
          <button
            type="button"
            className="font-medium text-primary underline-offset-2 hover:underline"
            onClick={() =>
              replaceQuery({ campaign_id: null, creator_profile_id: null, page: 1 })
            }
          >
            Clear record filters
          </button>
        </p>
      ) : null}

      <AdminFilterBar onSubmit={handleSubmit} onReset={handleReset} disabled={loading}>
        <AdminFilterField label="Status">
          <select
            className={adminFilterInputClassName}
            value={status}
            onChange={(e) => setStatus(e.target.value)}
          >
            <option value="">All</option>
            <option value="pending">Pending</option>
            <option value="submitted">Submitted</option>
            <option value="revision_requested">Revision requested</option>
            <option value="approved">Approved</option>
          </select>
        </AdminFilterField>
      </AdminFilterBar>

      {error ? (
        <ErrorState
          title="Unable to load deliverables"
          message={error}
          onRetry={() => replaceQuery({ page: urlPage })}
        />
      ) : loading ? (
        <AdminTableSkeleton columns={8} />
      ) : (
        <>
          <AdminDataTable
            rows={rows}
            caption="Deliverables"
            emptyTitle="No deliverables found"
            emptyDescription="Deliverables appear when creators join campaigns."
            columns={[
              {
                key: "type",
                header: "Type / platform",
                cell: (row) => (
                  <div className="min-w-[8rem]">
                    <p className="font-medium capitalize text-primary">
                      {row.type.replaceAll("_", " ")}
                    </p>
                    <p className="mt-0.5 capitalize text-[0.75rem] text-ink-40">{row.platform}</p>
                  </div>
                ),
              },
              {
                key: "campaign",
                header: "Campaign",
                cell: (row) =>
                  row.campaign ? (
                    <Link
                      href={`/admin/campaigns/${row.campaign.id}`}
                      className="text-ink-60 underline-offset-2 hover:text-primary hover:underline"
                    >
                      {row.campaign.name}
                    </Link>
                  ) : (
                    <span className="text-ink-40">—</span>
                  ),
              },
              {
                key: "creator",
                header: "Creator",
                cell: (row) => {
                  const label = row.creator?.display_name ?? row.creator?.username ?? "—";
                  const userId = row.creator?.user?.id;
                  if (!userId) {
                    return <span className="text-ink-60">{label}</span>;
                  }
                  return (
                    <Link
                      href={`/admin/users/${userId}`}
                      className="text-ink-60 underline-offset-2 hover:text-primary hover:underline"
                    >
                      {label}
                    </Link>
                  );
                },
              },
              {
                key: "due",
                header: "Due",
                cell: (row) => (
                  <span className="whitespace-nowrap text-[0.75rem] text-ink-40">
                    {formatAdminDate(row.due_at)}
                  </span>
                ),
              },
              {
                key: "status",
                header: "Status",
                cell: (row) => <AdminStatusBadge status={row.status} />,
              },
              {
                key: "submission",
                header: "Latest submission",
                cell: (row) => {
                  if (!row.latest_submission) {
                    return <span className="text-ink-40">None</span>;
                  }
                  return (
                    <div className="min-w-[10rem] space-y-1">
                      <AdminStatusBadge status={row.latest_submission.status} />
                      <p className="text-[0.75rem] text-ink-40">
                        v{row.latest_submission.version} ·{" "}
                        {formatAdminDate(row.latest_submission.submitted_at)}
                      </p>
                      {row.latest_submission.content_url ? (
                        <SafeExternalLink href={row.latest_submission.content_url}>
                          Open content
                        </SafeExternalLink>
                      ) : null}
                    </div>
                  );
                },
              },
              {
                key: "actions",
                header: "Action",
                className: "text-right",
                headerClassName: "text-right",
                cell: (row) => <AdminActionLink href={`/admin/deliverables/${row.id}`} />,
              },
            ]}
          />
          {meta ? (
            <AdminPagination
              meta={meta}
              onPageChange={(next) => replaceQuery({ page: next })}
            />
          ) : null}
        </>
      )}
    </div>
  );
}