"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { AdminBackLink } from "@/components/admin/AdminBackLink";
import {
  AdminDetailSection,
  AdminInfoList,
  AdminInfoRow,
} from "@/components/admin/AdminDetailSection";
import { AdminShell } from "@/components/admin/AdminShell";
import { AdminStatusBadge } from "@/components/admin/AdminStatusBadge";
import { AdminDetailSkeleton } from "@/components/admin/AdminTableSkeleton";
import { ErrorState } from "@/components/ui/ErrorState";
import { ApiError } from "@/lib/api";
import { adminApi, formatAdminDate } from "@/lib/api/admin";
import type { AdminDeliverableDetail } from "@/types/admin";

function SafeExternalLink({ href }: { href: 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"
    >
      {href}
    </a>
  );
}

export function AdminDeliverableDetailPage() {
  return (
    <AdminShell title="Deliverable" subtitle="Submission history (read-only)">
      {() => <DeliverableDetailContent />}
    </AdminShell>
  );
}

function DeliverableDetailContent() {
  const params = useParams<{ id: string }>();
  const id = Number(params.id);
  const [deliverable, setDeliverable] = useState<AdminDeliverableDetail | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  async function load() {
    if (!Number.isFinite(id)) {
      setError("Invalid deliverable id.");
      setLoading(false);
      return;
    }
    setLoading(true);
    setError(null);
    try {
      setDeliverable(await adminApi.getDeliverable(id));
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "Unable to load deliverable.");
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    void load();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [id]);

  if (loading) {
    return <AdminDetailSkeleton />;
  }

  if (error || !deliverable) {
    return (
      <div className="space-y-4">
        <AdminBackLink href="/admin/deliverables">Back to deliverables</AdminBackLink>
        <ErrorState
          title="Deliverable unavailable"
          message={error ?? "Not found."}
          onRetry={() => void load()}
        />
      </div>
    );
  }

  const creatorLabel =
    deliverable.creator?.display_name ?? deliverable.creator?.username ?? "—";
  const creatorUserId = deliverable.creator?.user?.id;

  return (
    <div className="space-y-5">
      <AdminBackLink href="/admin/deliverables">Back to deliverables</AdminBackLink>

      <header className="rounded-[10px] border border-line/80 bg-surface p-4 shadow-pv sm:p-5">
        <div className="flex flex-wrap items-center gap-2">
          <h2 className="text-[1.25rem] font-semibold capitalize tracking-[-0.02em] text-primary">
            {deliverable.type.replaceAll("_", " ")}
          </h2>
          <AdminStatusBadge status={deliverable.status} />
          <AdminStatusBadge status={deliverable.platform} />
        </div>
        <div className="mt-2.5 flex flex-wrap gap-x-5 gap-y-1 text-[0.8125rem] text-ink-60">
          {deliverable.campaign ? (
            <Link
              href={`/admin/campaigns/${deliverable.campaign.id}`}
              className="underline-offset-2 hover:text-primary hover:underline"
            >
              {deliverable.campaign.name}
            </Link>
          ) : null}
          {creatorUserId ? (
            <Link
              href={`/admin/users/${creatorUserId}`}
              className="underline-offset-2 hover:text-primary hover:underline"
            >
              {creatorLabel}
            </Link>
          ) : (
            <span>{creatorLabel}</span>
          )}
          <span className="text-ink-40">Due {formatAdminDate(deliverable.due_at)}</span>
        </div>
      </header>

      <div className="grid gap-4 lg:grid-cols-2">
        <AdminDetailSection title="Brief">
          <AdminInfoList>
            <AdminInfoRow label="Title">{deliverable.title ?? "—"}</AdminInfoRow>
            <AdminInfoRow label="Quantity">{deliverable.quantity}</AdminInfoRow>
            <AdminInfoRow label="Description">
              <span className="leading-snug text-ink-60">
                {deliverable.description ?? "—"}
              </span>
            </AdminInfoRow>
            <AdminInfoRow label="Requirements">
              <span className="leading-snug text-ink-60">
                {deliverable.requirements ?? "—"}
              </span>
            </AdminInfoRow>
            <AdminInfoRow label="Creator instructions">
              <span className="leading-snug text-ink-60">
                {deliverable.creator_instructions ?? "—"}
              </span>
            </AdminInfoRow>
            <AdminInfoRow label="Reference">
              {deliverable.reference_url ? (
                <SafeExternalLink href={deliverable.reference_url} />
              ) : (
                "—"
              )}
            </AdminInfoRow>
          </AdminInfoList>
        </AdminDetailSection>

        <AdminDetailSection
          title="Submissions"
          description={`${deliverable.submissions.length} version${deliverable.submissions.length === 1 ? "" : "s"}`}
        >
          {deliverable.submissions.length === 0 ? (
            <p className="py-3 text-[0.8125rem] text-ink-60">No submissions yet.</p>
          ) : (
            <ul className="divide-y divide-line">
              {deliverable.submissions.map((submission) => (
                <li key={submission.id} className="space-y-2 py-3 text-[0.8125rem]">
                  <div className="flex flex-wrap items-center gap-2">
                    <span className="font-medium text-primary">v{submission.version}</span>
                    <AdminStatusBadge status={submission.status} />
                    <span className="text-[0.75rem] text-ink-40">
                      Submitted {formatAdminDate(submission.submitted_at)}
                    </span>
                  </div>
                  {submission.content_url ? (
                    <p>
                      <span className="text-ink-40">Content · </span>
                      <SafeExternalLink href={submission.content_url} />
                    </p>
                  ) : null}
                  {submission.caption ? (
                    <p className="leading-snug text-ink-60">
                      <span className="text-ink-40">Caption · </span>
                      {submission.caption}
                    </p>
                  ) : null}
                  {submission.notes ? (
                    <p className="leading-snug text-ink-60">
                      <span className="text-ink-40">Notes · </span>
                      {submission.notes}
                    </p>
                  ) : null}
                  {submission.review_notes ? (
                    <p className="leading-snug text-ink-60">
                      <span className="text-ink-40">Review · </span>
                      {submission.review_notes}
                      {submission.reviewed_at
                        ? ` (${formatAdminDate(submission.reviewed_at)})`
                        : ""}
                    </p>
                  ) : null}
                </li>
              ))}
            </ul>
          )}
        </AdminDetailSection>
      </div>
    </div>
  );
}