import React from "react";
import { cn } from "@/lib/utils";
import { formatCurrency } from "@/lib/format-currency";
import { formatDateShort } from "@/lib/format-date";
import { Button } from "@/components/ui/button";

/**
 * Loan draft selector shown on the "Select application to continue" screen.
 * Two variants (BUILD-1612):
 *   - Multi-draft: grid of cards — consumer renders when loans.length > 1
 *   - Single-draft: consumer can skip this screen entirely when loans.length === 1
 *
 * This component always renders the grid. The caller decides whether to show it.
 */

export type LoanCardApplicant = {
  name: string;
  isMain: boolean;
};

export type LoanCardItem = {
  id: string;
  /** ISO date string */
  createdAt: string;
  desiredLoanAmount?: number;
  isJoint: boolean;
  applicants: LoanCardApplicant[];
};

export type LoanApplicationCardsProps = {
  loans: LoanCardItem[];
  onSelect: (id: string) => void;
  onBack: () => void;
  companyName?: string;
  className?: string;
};

export function LoanApplicationCards({
  loans,
  onSelect,
  onBack,
  companyName,
  className,
}: LoanApplicationCardsProps) {
  return (
    <div className={cn("flex flex-col gap-6", className)}>
      {/* Header */}
      <div className="flex flex-col gap-2">
        <h2 className="text-xl font-bold">Select an application to continue</h2>
        <p className="text-sm text-muted-foreground">
          Tip: Get technical and broker support by visiting the support section
          within the app
        </p>
      </div>

      {/* Section */}
      <div className="flex flex-col gap-4">
        <p className="text-sm font-medium">
          What loan application would you like to continue?
        </p>

        {/* Card grid */}
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          {loans.map((loan) => (
            <div
              key={loan.id}
              className="flex flex-col justify-between gap-4 border border-border p-4"
            >
              <div className="flex flex-col gap-3">
                {/* Meta: date + company */}
                <div className="flex items-center justify-between text-sm">
                  <div className="flex items-center gap-1.5 text-muted-foreground">
                    <CalendarIcon />
                    <span>
                      <strong className="text-foreground">Started</strong>{" "}
                      {formatDateShort(loan.createdAt)}
                    </span>
                  </div>
                  {companyName && (
                    <span className="text-xs text-muted-foreground">
                      {companyName}
                    </span>
                  )}
                </div>

                {/* Loan amount */}
                <div className="flex items-center justify-between text-sm">
                  <span className="text-muted-foreground">Loan Amount</span>
                  <strong>{formatCurrency(loan.desiredLoanAmount ?? 0)}</strong>
                </div>

                <hr className="border-border" />

                {/* Applicant type + names */}
                <div className="flex flex-col gap-1 text-sm">
                  <strong>
                    {loan.isJoint
                      ? "Joint Application"
                      : "Individual Application"}
                  </strong>
                  {loan.applicants.map((a) => (
                    <span key={a.name} className="text-muted-foreground">
                      {a.name}
                      {loan.isJoint && (
                        <span className="text-xs">
                          {" "}
                          ({a.isMain ? "Main Applicant" : "Co-Applicant"})
                        </span>
                      )}
                    </span>
                  ))}
                </div>
              </div>

              <Button
                type="button"
                variant="outline"
                className="w-full"
                onClick={() => onSelect(loan.id)}
              >
                Continue
              </Button>
            </div>
          ))}
        </div>

        <Button type="button" variant="ghost" onClick={onBack}>
          Back
        </Button>
      </div>
    </div>
  );
}

function CalendarIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.5}
      strokeLinecap="round"
      strokeLinejoin="round"
      className="size-3.5 shrink-0"
      aria-hidden="true"
    >
      <rect x="3" y="4" width="18" height="18" rx="2" />
      <path d="M16 2v4M8 2v4M3 10h18" />
    </svg>
  );
}