"use client";

import type { ReactNode } from "react";
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 { adminListHref } from "@/lib/admin-list-query";
import { adminApi, formatAdminDate, formatAdminMoney } from "@/lib/api/admin";
import type { AdminCampaignDetail } from "@/types/admin";

export function AdminCampaignDetailPage() {
  return (
    <AdminShell title="Campaign" subtitle="Marketplace detail">
      {() => <CampaignDetailContent />}
    </AdminShell>
  );
}

function renderStructuredValue(value: unknown): ReactNode {
  if (value == null || value === "") {
    return <span className="text-ink-40">—</span>;
  }

  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
    return String(value);
  }

  if (Array.isArray(value)) {
    if (value.length === 0) {
      return <span className="text-ink-40">—</span>;
    }
    if (value.every((item) => typeof item === "string" || typeof item === "number")) {
      return value.join(", ");
    }
    return (
      <ul className="space-y-1">
        {value.map((item, index) => (
          <li key={index} className="text-ink-60">
            {typeof item === "object" && item !== null
              ? Object.entries(item as Record<string, unknown>)
                  .map(([k, v]) => `${k}: ${String(v ?? "—")}`)
                  .join(" · ")
              : String(item)}
          </li>
        ))}
      </ul>
    );
  }

  if (typeof value === "object") {
    const entries = Object.entries(value as Record<string, unknown>);
    if (entries.length === 0) {
      return <span className="text-ink-40">—</span>;
    }
    return (
      <ul className="space-y-1">
        {entries.map(([key, entryValue]) => (
          <li key={key}>
            <span className="text-ink-40">{key.replaceAll("_", " ")}:</span>{" "}
            {entryValue == null || entryValue === ""
              ? "—"
              : Array.isArray(entryValue)
                ? entryValue.join(", ")
                : String(entryValue)}
          </li>
        ))}
      </ul>
    );
  }

  return String(value);
}

function CampaignDetailContent() {
  const params = useParams<{ id: string }>();
  const id = Number(params.id);
  const [campaign, setCampaign] = useState<AdminCampaignDetail | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

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

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

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

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

  return (
    <div className="space-y-5">
      <AdminBackLink href="/admin/campaigns">Back to campaigns</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 tracking-[-0.02em] text-primary">
            {campaign.name}
          </h2>
          <AdminStatusBadge status={campaign.status} />
        </div>
        <div className="mt-2.5 flex flex-wrap gap-x-5 gap-y-1 text-[0.8125rem] text-ink-60">
          <span>{campaign.brand?.company_name ?? "Unknown brand"}</span>
          <span className="tabular-nums font-medium text-primary">
            Budget {formatAdminMoney(campaign.budget_amount, campaign.currency)}
          </span>
          <span className="text-ink-40">Created {formatAdminDate(campaign.created_at)}</span>
        </div>
      </header>

      <div className="grid gap-4 lg:grid-cols-2">
        <AdminDetailSection title="Campaign overview" className="lg:col-span-2">
          <AdminInfoList>
            <AdminInfoRow label="Description">
              <span className="leading-snug">
                {campaign.description?.trim() ? campaign.description : "No description."}
              </span>
            </AdminInfoRow>
            <AdminInfoRow label="Schedule">
              {formatAdminDate(campaign.start_date)} → {formatAdminDate(campaign.end_date)}
            </AdminInfoRow>
            <AdminInfoRow label="Brand contact">
              {campaign.brand?.user ? (
                <Link
                  href={`/admin/users/${campaign.brand.user.id}`}
                  className="underline-offset-2 hover:text-primary hover:underline"
                >
                  {campaign.brand.user.name} · {campaign.brand.user.email}
                </Link>
              ) : (
                "—"
              )}
            </AdminInfoRow>
            <AdminInfoRow label="Platforms">{renderStructuredValue(campaign.platforms)}</AdminInfoRow>
          </AdminInfoList>
        </AdminDetailSection>

        <AdminDetailSection title="Target audience">
          <div className="py-2.5 text-[0.8125rem] text-text">
            {renderStructuredValue(campaign.target_audience)}
          </div>
        </AdminDetailSection>

        <AdminDetailSection title="Deliverables">
          <AdminInfoList>
            <AdminInfoRow label="Pending">{campaign.deliverable_summary.pending}</AdminInfoRow>
            <AdminInfoRow label="Submitted">{campaign.deliverable_summary.submitted}</AdminInfoRow>
            <AdminInfoRow label="Revision">
              {campaign.deliverable_summary.revision_requested}
            </AdminInfoRow>
            <AdminInfoRow label="Approved">{campaign.deliverable_summary.approved}</AdminInfoRow>
            <AdminInfoRow label="Total">{campaign.deliverable_summary.total}</AdminInfoRow>
          </AdminInfoList>
          <div className="border-t border-line py-2.5 text-[0.8125rem]">
            <Link
              href={adminListHref("/admin/deliverables", { campaign_id: campaign.id })}
              className="text-[0.8125rem] font-medium text-primary underline-offset-2 hover:underline"
            >
              Open deliverables for this campaign
            </Link>
            {(campaign.deliverable_rows?.length ?? 0) > 0 ? (
              <ul className="mt-3 divide-y divide-line">
                {campaign.deliverable_rows?.map((row) => (
                  <li
                    key={row.id}
                    className="flex flex-wrap items-center justify-between gap-2 py-2"
                  >
                    <div>
                      <Link
                        href={`/admin/deliverables/${row.id}`}
                        className="font-medium capitalize text-primary underline-offset-2 hover:underline"
                      >
                        {row.type.replaceAll("_", " ")}
                      </Link>
                      <p className="text-[0.75rem] text-ink-40">
                        {row.creator?.display_name ?? row.creator?.username ?? "Creator"} · Due{" "}
                        {formatAdminDate(row.due_at)}
                      </p>
                    </div>
                    <AdminStatusBadge status={row.status} />
                  </li>
                ))}
              </ul>
            ) : (
              <div className="mt-3">
                <p className="mb-1.5 text-[0.75rem] font-medium text-ink-40">Brief requirements</p>
                {renderStructuredValue(campaign.deliverables)}
              </div>
            )}
          </div>
        </AdminDetailSection>

        <AdminDetailSection
          title="Applications"
          description={`${campaign.applications.length} total`}
          className="lg:col-span-2"
        >
          {campaign.applications.length === 0 ? (
            <p className="py-3 text-[0.8125rem] text-ink-60">No applications.</p>
          ) : (
            <ul className="divide-y divide-line">
              {campaign.applications.map((application) => {
                const label =
                  application.creator?.display_name ??
                  application.creator?.username ??
                  "Creator";
                const userId = application.creator?.user?.id;
                return (
                  <li
                    key={application.id}
                    className="flex flex-wrap items-center justify-between gap-2 py-2.5 text-[0.8125rem]"
                  >
                    {userId ? (
                      <Link
                        href={`/admin/users/${userId}`}
                        className="font-medium text-primary underline-offset-2 hover:underline"
                      >
                        {label}
                      </Link>
                    ) : (
                      <span className="font-medium text-primary">{label}</span>
                    )}
                    <div className="flex items-center gap-2">
                      <AdminStatusBadge status={application.status} />
                      <span className="text-[0.75rem] text-ink-40">
                        {formatAdminDate(application.created_at)}
                      </span>
                    </div>
                  </li>
                );
              })}
            </ul>
          )}
        </AdminDetailSection>

        <AdminDetailSection
          title="Participants"
          description={`${campaign.participants.length} total`}
          className="lg:col-span-2"
        >
          {campaign.participants.length === 0 ? (
            <p className="py-3 text-[0.8125rem] text-ink-60">No participants.</p>
          ) : (
            <ul className="divide-y divide-line">
              {campaign.participants.map((participant) => {
                const label =
                  participant.creator?.display_name ??
                  participant.creator?.username ??
                  "Creator";
                const userId = participant.creator?.user?.id;
                return (
                  <li
                    key={participant.id}
                    className="flex flex-wrap items-center justify-between gap-2 py-2.5 text-[0.8125rem]"
                  >
                    <div>
                      {userId ? (
                        <Link
                          href={`/admin/users/${userId}`}
                          className="font-medium text-primary underline-offset-2 hover:underline"
                        >
                          {label}
                        </Link>
                      ) : (
                        <p className="font-medium text-primary">{label}</p>
                      )}
                      <p className="text-[0.75rem] capitalize text-ink-40">{participant.source}</p>
                    </div>
                    <AdminStatusBadge status={participant.status} />
                  </li>
                );
              })}
            </ul>
          )}
        </AdminDetailSection>

        <AdminDetailSection title="Payments" className="lg:col-span-2">
          <AdminInfoList>
            <AdminInfoRow label="Payment count">{campaign.payment_summary.count}</AdminInfoRow>
            <AdminInfoRow label="Succeeded volume">
              <span className="tabular-nums font-medium text-primary">
                {formatAdminMoney(campaign.payment_summary.succeeded_total, campaign.currency)}
              </span>
            </AdminInfoRow>
            <AdminInfoRow label="Platform fees">
              <span className="tabular-nums">
                {formatAdminMoney(campaign.payment_summary.platform_fee_total, campaign.currency)}
              </span>
            </AdminInfoRow>
          </AdminInfoList>
          <div className="border-t border-line pt-2">
            <Link
              href={adminListHref("/admin/finance/payments", { campaign_id: campaign.id })}
              className="text-[0.8125rem] font-medium text-primary underline-offset-2 hover:underline"
            >
              Open payments for this campaign
            </Link>
          </div>
          {campaign.payments.length === 0 ? (
            <p className="border-t border-line py-3 text-[0.8125rem] text-ink-60">No payments.</p>
          ) : (
            <ul className="divide-y divide-line border-t border-line">
              {campaign.payments.map((payment) => (
                <li
                  key={payment.id}
                  className="flex flex-wrap items-center justify-between gap-2 py-2.5 text-[0.8125rem]"
                >
                  <div>
                    <p className="font-medium text-primary">#{payment.id}</p>
                    <p className="font-mono text-[0.6875rem] text-ink-40">
                      {payment.stripe_payment_intent_id ?? "—"}
                    </p>
                    {payment.failure_reason ? (
                      <p className="mt-0.5 text-[0.75rem] text-red-700">{payment.failure_reason}</p>
                    ) : null}
                  </div>
                  <div className="flex flex-wrap items-center gap-2">
                    <span className="tabular-nums font-medium">
                      {formatAdminMoney(payment.total_amount, payment.currency)}
                    </span>
                    <AdminStatusBadge status={payment.status} />
                  </div>
                </li>
              ))}
            </ul>
          )}
        </AdminDetailSection>
      </div>
    </div>
  );
}