"use client";

import * as React from "react";
import Link from "next/link";
import { format } from "date-fns";
import { ExternalLink } from "lucide-react";

import { useGetDealQuery, type Deal } from "@/api/rtk/deals-api";
import { useGetPipelinesQuery } from "@/api/rtk";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Spinner } from "@/components/ui/spinner";
import { formatLeadMeetingMediumLabel } from "@/lib/lead-meeting-medium";
import { flattenPipelineStages, resolveLeadStageDisplayName } from "@/lib/deal-stage-labels";
import { cn } from "@/lib/utils";

function formatAssigneeNames(rel?: { name?: string | null }[] | null): string {
  const names =
    rel?.map((r) => r.name?.trim()).filter((n): n is string => Boolean(n)) ?? [];
  return names.length ? names.join(", ") : "—";
}

function formatDateValue(d?: string | null, withTime = false): string {
  if (!d) return "—";
  const dt = new Date(d);
  if (isNaN(dt.getTime())) return "—";
  return format(dt, withTime ? "MMM d, yyyy h:mm a" : "MMM d, yyyy");
}

function resolveLabel(
  value?: string | null | { id: string; name: string },
): string {
  if (value == null || value === "") return "—";
  if (typeof value === "object") return value.name || "—";
  return value;
}

function DetailField({
  label,
  value,
  className,
}: {
  label: string;
  value?: React.ReactNode;
  className?: string;
}) {
  return (
    <div className={cn("space-y-1", className)}>
      <dt className="text-[10px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca']">
        {label}
      </dt>
      <dd className="text-sm text-gray-900 break-words [overflow-wrap:anywhere]">
        {value ?? "—"}
      </dd>
    </div>
  );
}

function SectionTitle({ children }: { children: React.ReactNode }) {
  return (
    <h3 className="border-b border-gray-100 pb-2 text-xs font-bold uppercase tracking-wider text-gray-700 font-['Lexend_Deca']">
      {children}
    </h3>
  );
}

function QaVerificationSummary({ deal }: { deal: Deal }) {
  const showup = deal.discoveryMeetingClientShowup;
  const verifiedAt = deal.discoveryMeetingVerifiedAt;
  const verifiedBy = deal.discoveryMeetingVerifiedBy?.name;

  if (showup === true) {
    return (
      <span className="inline-flex items-center rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-800">
        Showed up
        {verifiedAt ? ` · ${formatDateValue(verifiedAt, true)}` : ""}
        {verifiedBy ? ` · ${verifiedBy}` : ""}
      </span>
    );
  }

  if (showup === false) {
    return (
      <span className="inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800">
        No show
        {verifiedAt ? ` · ${formatDateValue(verifiedAt, true)}` : ""}
        {verifiedBy ? ` · ${verifiedBy}` : ""}
      </span>
    );
  }

  return (
    <span className="inline-flex items-center rounded-full bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-800">
      Pending QA
    </span>
  );
}

type QaVerifyLeadViewDialogProps = {
  lead: Deal | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
};

export function QaVerifyLeadViewDialog({
  lead,
  open,
  onOpenChange,
}: QaVerifyLeadViewDialogProps) {
  const leadId = lead?.id ?? "";
  const { data: fullDeal, isLoading, isFetching } = useGetDealQuery(leadId, {
    skip: !open || !leadId,
  });
  const { data: pipelines = [] } = useGetPipelinesQuery(undefined, {
    skip: !open,
  });

  const deal = fullDeal ?? lead;
  const meeting = deal?.latestLeadMeeting;
  const pipelineStages = React.useMemo(
    () => pipelines.flatMap((pipeline) => flattenPipelineStages(pipeline.stages ?? [])),
    [pipelines],
  );
  const stageDisplayName = deal
    ? resolveLeadStageDisplayName(deal, pipelineStages)
    : "—";

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="flex max-h-[min(90vh,820px)] flex-col gap-0 overflow-hidden p-0 sm:max-w-2xl">
        <DialogHeader className="border-b border-gray-100 px-6 py-4 text-left">
          <DialogTitle className="font-['Lexend'] text-xl">
            {deal?.customerName || "Lead details"}
          </DialogTitle>
          <DialogDescription className="text-sm text-gray-600">
            {deal?.leadId ? `Lead ID: ${deal.leadId}` : "Complete lead record for QA verification"}
          </DialogDescription>
        </DialogHeader>

        <div className="flex-1 overflow-y-auto px-6 py-5 scrollbar-themed">
          {!deal ? (
            <p className="text-sm text-muted-foreground">No lead selected.</p>
          ) : isLoading && !fullDeal ? (
            <div className="flex h-32 items-center justify-center">
              <Spinner />
            </div>
          ) : (
            <dl className="space-y-6">
              <section className="space-y-3">
                <SectionTitle>Lead</SectionTitle>
                <div className="grid gap-4 sm:grid-cols-2">
                  <DetailField label="Customer name" value={deal.customerName} />
                  <DetailField label="Lead ID" value={deal.leadId} />
                  <DetailField label="Company" value={deal.companyName} />
                  <DetailField label="Stage" value={stageDisplayName} />
                  <DetailField label="Lead status" value={deal.leadStatus} />
                  <DetailField label="Brand" value={deal.brand} />
                </div>
              </section>

              <section className="space-y-3">
                <SectionTitle>Contact</SectionTitle>
                <div className="grid gap-4 sm:grid-cols-2">
                  <DetailField label="Phone" value={deal.phone} />
                  <DetailField label="Home phone" value={deal.homePhone} />
                  <DetailField label="Email" value={deal.email} />
                  <DetailField label="Postal code" value={deal.postalCode} />
                  <DetailField label="Address" value={deal.address} className="sm:col-span-2" />
                </div>
              </section>

              <section className="space-y-3">
                <SectionTitle>Ownership & team</SectionTitle>
                <div className="grid gap-4 sm:grid-cols-2">
                  <DetailField label="Owner" value={deal.owner?.name} />
                  <DetailField label="Team" value={deal.team} />
                  <DetailField label="Created by" value={deal.createdBy} />
                  <DetailField label="Channel" value={resolveLabel(deal.leadChannel)} />
                  <DetailField label="Service" value={resolveLabel(deal.service ?? deal.serviceName)} />
                  <DetailField label="Timeline intent" value={resolveLabel(deal.timelineIntent)} />
                </div>
              </section>

              <section className="space-y-3">
                <SectionTitle>Assignees</SectionTitle>
                <div className="grid gap-4 sm:grid-cols-2">
                  <DetailField label="Account executive" value={formatAssigneeNames(deal.aes)} />
                  <DetailField label="BDR" value={formatAssigneeNames(deal.bdrs)} />
                  <DetailField label="Contributors" value={formatAssigneeNames(deal.contributors)} className="sm:col-span-2" />
                </div>
              </section>

              <section className="space-y-3">
                <SectionTitle>Discovery meeting</SectionTitle>
                <div className="grid gap-4 sm:grid-cols-2">
                  <DetailField label="Meeting date" value={formatDateValue(meeting?.meetingDate, true)} />
                  <DetailField
                    label="Medium"
                    value={formatLeadMeetingMediumLabel(meeting?.medium, meeting?.notes)}
                  />
                  <DetailField label="Meeting notes" value={meeting?.notes} className="sm:col-span-2" />
                </div>
              </section>

              <section className="space-y-3">
                <SectionTitle>QA verification</SectionTitle>
                <div className="grid gap-4 sm:grid-cols-2">
                  <DetailField label="Status" value={<QaVerificationSummary deal={deal} />} />
                  <DetailField
                    label="Verified at"
                    value={formatDateValue(deal.discoveryMeetingVerifiedAt, true)}
                  />
                  <DetailField label="Verified by" value={deal.discoveryMeetingVerifiedBy?.name} />
                  <DetailField label="First transaction" value={formatDateValue(deal.firstPaidOn)} />
                  <DetailField label="Recent paid date" value={formatDateValue(deal.recentPaidOn)} />
                </div>
              </section>

              <section className="space-y-3">
                <SectionTitle>Record</SectionTitle>
                <div className="grid gap-4 sm:grid-cols-2">
                  <DetailField label="Created" value={formatDateValue(deal.createdDate || deal.createdAt)} />
                  <DetailField label="Updated" value={formatDateValue(deal.updatedAt)} />
                  <DetailField label="Expected payment" value={formatDateValue(deal.expectedPaymentDate)} />
                  <DetailField
                    label="Tags"
                    value={deal.tags?.length ? deal.tags.join(", ") : undefined}
                    className="sm:col-span-2"
                  />
                  <DetailField label="Lead details" value={deal.leadDetails} className="sm:col-span-2" />
                </div>
              </section>

              {isFetching && fullDeal ? (
                <p className="text-xs text-muted-foreground">Refreshing lead data…</p>
              ) : null}
            </dl>
          )}
        </div>

        <DialogFooter className="border-t border-gray-100 px-6 py-4 sm:justify-between">
          {deal ? (
            <Button variant="outline" size="sm" asChild>
              <Link href={`/leads/${deal.id}`} target="_blank" rel="noopener noreferrer">
                <ExternalLink className="mr-1.5 size-3.5" />
                Open full lead page
              </Link>
            </Button>
          ) : (
            <span />
          )}
          <Button variant="outline" size="sm" onClick={() => onOpenChange(false)}>
            Close
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}