import Link from "next/link";
import { notFound } from "next/navigation";
import {
  deleteInquiryAction,
  updateInquiryStatusAction,
} from "@/app/dashboard/actions";
import { DashboardPageHeader } from "@/components/dashboard/page-header";
import { DashboardShell } from "@/components/dashboard/dashboard-shell";
import { requireDashboardContext } from "@/core/auth/dashboard-context";
import {
  getInquiryForTenant,
  type InquiryStatus,
} from "@/services/inquiry-service";

const STATUSES: InquiryStatus[] = [
  "new",
  "qualified",
  "consultation",
  "proposal",
  "won",
  "lost",
];

export default async function InquiryDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const ctx = await requireDashboardContext("inquiries:manage");
  const inquiry = await getInquiryForTenant(ctx.tenant, id);
  if (!inquiry) notFound();

  return (
    <DashboardShell width="narrow">
      <Link
        href="/dashboard/inquiries"
        className="text-sm text-[var(--archi-ink-muted)]"
      >
        ← Inquiries
      </Link>

      <DashboardPageHeader
        eyebrow="Studio"
        title={inquiry.name}
        description={`Received ${new Date(inquiry.createdAt).toLocaleString()}`}
        actions={
          <form action={deleteInquiryAction.bind(null, inquiry.id)}>
            <button
              type="submit"
              className="border border-red-300 px-4 py-2 text-sm text-red-800"
            >
              Delete
            </button>
          </form>
        }
      />

      <dl className="mt-8 space-y-4 rounded-2xl border border-[var(--archi-line)] bg-white/80 p-5 text-sm">
        <Row label="Email" value={inquiry.email} />
        <Row label="Phone" value={inquiry.phone ?? "—"} />
        <Row label="Project type" value={inquiry.projectType ?? "—"} />
        <Row label="Budget" value={inquiry.budget ?? "—"} />
        <Row label="Location" value={inquiry.location ?? "—"} />
        <Row label="Timeline" value={inquiry.timeline ?? "—"} />
        <Row label="Project size" value={inquiry.projectSize ?? "—"} />
        <Row label="Status" value={inquiry.status} />
      </dl>

      <section className="mt-6 rounded-2xl border border-[var(--archi-line)] bg-white/80 p-5">
        <h2 className="font-[family-name:var(--font-display)] text-lg">Message</h2>
        <p className="mt-3 whitespace-pre-wrap leading-6">{inquiry.message}</p>
      </section>

      <form
        action={async (formData) => {
          "use server";
          const status = String(formData.get("status") ?? "") as InquiryStatus;
          await updateInquiryStatusAction(inquiry.id, status);
        }}
        className="mt-6 flex flex-wrap items-center gap-3"
      >
        <label className="text-sm">
          Update status
          <select
            name="status"
            defaultValue={inquiry.status}
            className="ml-2 border border-[var(--archi-line)] bg-white px-2 py-1.5"
          >
            {STATUSES.map((status) => (
              <option key={status} value={status}>
                {status}
              </option>
            ))}
          </select>
        </label>
        <button type="submit" className="archi-btn-primary">
          Save status
        </button>
      </form>
    </DashboardShell>
  );
}

function Row({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex justify-between gap-4 border-b border-[var(--archi-line)] pb-3 last:border-0">
      <dt className="text-[var(--archi-ink-muted)]">{label}</dt>
      <dd className="font-medium capitalize">{value}</dd>
    </div>
  );
}