import React, { useState } from "react";
import { Button } from "./button";
import { Separator } from "./separator";
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "./accordion";
import {
  PropertyCard,
  DebtCard,
  OtherLiabilityCard,
  AlertCard,
  type PropertyCardProps,
  type DebtCardProps,
  type OtherLiabilityCardProps,
  type AlertCardProps,
  type AlertActionType,
  type AlertSeverity,
} from "./financial-cards";
import {
  FinancialCardHeader,
  FinancialDetailField,
  FinancialLineItem,
  FinancialSectionLabel,
  FinancialSubtotalFrame,
  FinancialSubtotalBlock,
} from "./financial-primitives";

/**
 * Financial section components — WealthX DS (Level 4)
 *
 * Composed from Level 3 cards into full page sections.
 * Used inside the Summary Report Drawer and Opportunity Details Drawer.
 *
 * ```
 * Level 2  →  FinancialDetailField, FinancialLvrBar …         (financial-primitives)
 * Level 3  →  PropertyCard, DebtCard, AlertCard …             (financial-cards)
 * Level 4  →  PropertyHoldingsSection, DebtSection …          ← here
 * Level 5  →  SummaryReportDrawer, OpportunityDetailsDrawer …
 * ```
 *
 * Component inventory:
 *   FinancialViewSection     — bordered card wrapping income + properties + current liabilities
 *   PropertyHoldingsSection  — grid of PropertyCards under a section header
 *   DebtSection              — grid of DebtCards under a section header
 *   OtherLiabilitiesSection  — grid of OtherLiabilityCards under a section header
 *   IncomeExpenseSection     — 3-column income / expenses / future-payments grid
 *   AlertAccordion           — collapsible accordion wrapping a grid of AlertCards
 *   LoanScenarioSection      — read-only Loan Quiz card (4-column grid)
 *   FinancialBottomSummary   — 3 stacked summary cards: cashflow / assets / net position
 */

// ---------------------------------------------------------------------------
// PropertyHoldingsSection
// ---------------------------------------------------------------------------

export interface PropertyHoldingsSectionProps {
  /** Section heading. Defaults to "Property Holdings". */
  title?: string;
  /** Each item maps 1:1 to a PropertyCard. */
  items: PropertyCardProps[];
  /**
   * When true renders columns without individual card borders, separated by a 1px divider.
   * Use inside `FinancialViewSection` to match the Figma Financial View card layout.
   */
  borderless?: boolean;
}

/** Two-column grid of PropertyCards under a section header. */
export function PropertyHoldingsSection({
  title = "Property Holdings",
  items,
  borderless = false,
}: PropertyHoldingsSectionProps) {
  if (items.length === 0) return null;
  return (
    <div>
      <FinancialCardHeader>{title}</FinancialCardHeader>
      {borderless ? (
        <div className="grid grid-cols-2">
          {items.map((item, i) => (
            <div
              key={`${item.address}-${i}`}
              className={i % 2 !== 0 ? "border-l border-border pl-5" : "pr-5"}
            >
              <PropertyCard {...item} borderless />
            </div>
          ))}
        </div>
      ) : (
        <div className="grid grid-cols-2 gap-5">
          {items.map((item, i) => (
            <PropertyCard key={`${item.address}-${i}`} {...item} />
          ))}
        </div>
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// DebtSection
// ---------------------------------------------------------------------------

export interface DebtSectionProps {
  /** Section heading. Defaults to "Mortgages & Investment Loans". */
  title?: string;
  /** Each item maps 1:1 to a DebtCard. */
  items: DebtCardProps[];
}

/** Two-column grid of DebtCards under a section header. */
export function DebtSection({
  title = "Mortgages & Investment Loans",
  items,
}: DebtSectionProps) {
  if (items.length === 0) return null;
  return (
    <div>
      <FinancialCardHeader>{title}</FinancialCardHeader>
      <div className="grid grid-cols-2 gap-3">
        {items.map((item, i) => (
          <DebtCard key={item.lenderName ?? i} {...item} />
        ))}
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// OtherLiabilitiesSection
// ---------------------------------------------------------------------------

export interface OtherLiabilitiesSectionProps {
  /** Section heading. Defaults to "Other Liabilities". */
  title?: string;
  /** Each item maps 1:1 to an OtherLiabilityCard. */
  items: OtherLiabilityCardProps[];
}

/** Two-column grid of OtherLiabilityCards under a section header. */
export function OtherLiabilitiesSection({
  title = "Other Liabilities",
  items,
}: OtherLiabilitiesSectionProps) {
  if (items.length === 0) return null;
  return (
    <div>
      <FinancialCardHeader>{title}</FinancialCardHeader>
      <div className="grid grid-cols-2 gap-5">
        {items.map((item, i) => (
          <OtherLiabilityCard
            key={`${item.lenderName ?? item.type}-${i}`}
            {...item}
          />
        ))}
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// IncomeExpenseSection
// ---------------------------------------------------------------------------

export interface SummaryLineItem {
  label: string;
  /** Formatted value string e.g. "$9,500". Renders "—" when falsy. */
  value?: string | null;
  /**
   * When true renders the value in `text-destructive`.
   * Use for expenses, liabilities, or negative cashflow rows.
   */
  destructive?: boolean;
}

export interface SummaryColumn {
  /** Column heading override. */
  label?: string;
  items: SummaryLineItem[];
  /** Formatted monthly average displayed in the tinted footer. */
  monthlyAverage?: string;
  /** Formatted 12-month total displayed in the tinted footer. */
  totalLast12Months?: string;
}

export interface IncomeExpenseSectionProps {
  income?: SummaryColumn;
  expenses?: SummaryColumn;
  futurePayments?: SummaryColumn;
  /** Override the "Future Payments" column heading. */
  futurePaymentsHeading?: string;
}

/**
 * Three-column layout: income | expenses | future payments.
 *
 * Each column has a header, a scrollable list of `FinancialLineItem` rows,
 * and a brand-tinted `FinancialSubtotalFrame` footer.
 */
export function IncomeExpenseSection({
  income,
  expenses,
  futurePayments,
  futurePaymentsHeading = "Future Payments",
}: IncomeExpenseSectionProps) {
  return (
    <div className="grid grid-cols-3">
      {/* Income */}
      <div className="flex flex-col pr-5">
        <FinancialCardHeader>
          {income?.label ?? "Average Monthly Income"}
        </FinancialCardHeader>
        <div className="flex flex-1 flex-col pb-4">
          {(income?.items ?? []).map((item) => (
            <FinancialLineItem
              key={item.label}
              label={item.label}
              value={item.value}
              destructive={item.destructive}
            />
          ))}
        </div>
        <FinancialSubtotalFrame>
          <FinancialSubtotalBlock
            monthlyAverage={income?.monthlyAverage}
            totalLast12Months={income?.totalLast12Months}
          />
        </FinancialSubtotalFrame>
      </div>

      {/* Expenses */}
      <div className="flex flex-col border-x border-border px-5">
        <FinancialCardHeader>
          {expenses?.label ?? "Monthly Expenses and Commitments"}
        </FinancialCardHeader>
        <div className="flex flex-1 flex-col pb-4">
          {(expenses?.items ?? []).map((item) => (
            <FinancialLineItem
              key={item.label}
              label={item.label}
              value={item.value}
              destructive={item.destructive}
            />
          ))}
        </div>
        <FinancialSubtotalFrame>
          <FinancialSubtotalBlock
            monthlyAverage={expenses?.monthlyAverage}
            totalLast12Months={expenses?.totalLast12Months}
          />
        </FinancialSubtotalFrame>
      </div>

      {/* Future Payments */}
      <div className="flex flex-col pl-5">
        <FinancialCardHeader>
          {futurePayments?.label ?? futurePaymentsHeading}
        </FinancialCardHeader>
        <div className="flex flex-1 flex-col pb-4">
          {(futurePayments?.items ?? []).map((item) => (
            <FinancialLineItem
              key={item.label}
              label={item.label}
              value={item.value}
              destructive={item.destructive}
            />
          ))}
        </div>
        <FinancialSubtotalFrame>
          <FinancialSubtotalBlock
            monthlyAverage={futurePayments?.monthlyAverage}
            totalLast12Months={futurePayments?.totalLast12Months}
          />
        </FinancialSubtotalFrame>
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// AlertAccordion
// ---------------------------------------------------------------------------

const SEVERITY_BG: Record<AlertSeverity, string> = {
  NEED_ACTION: "bg-destructive text-destructive-foreground",
  WATCH: "bg-warning text-warning-foreground",
  INSIGHT: "bg-success text-success-foreground",
};

export interface AlertAccordionSavePayload {
  alertId: string;
  action: AlertActionType;
}

export interface AlertAccordionProps {
  /** List of alerts — each maps 1:1 to an AlertCard. */
  alerts: AlertCardProps[];
  /**
   * Called when the user clicks Save.
   * Receives only alerts with a pending dismiss or snooze action selected.
   * When omitted the Save button is never shown.
   */
  onSaveActions?: (actions: AlertAccordionSavePayload[]) => void;
  /** When `true` the Save button shows "Saving…" and is disabled. */
  isSaving?: boolean;
}

/**
 * Collapsible accordion wrapping a 3-column grid of AlertCards.
 *
 * - The trigger header shows the section title + severity count badges.
 * - A Save button appears when the user has pending dismiss/snooze selections
 *   and `onSaveActions` is provided.
 * - Returns `null` when `alerts` is empty.
 */
export function AlertAccordion({
  alerts,
  onSaveActions,
  isSaving = false,
}: AlertAccordionProps) {
  const [actionMap, setActionMap] = useState<Record<string, AlertActionType>>(
    {},
  );

  const handleActionChange = (id: string) => (action: AlertActionType) => {
    setActionMap((prev) => ({ ...prev, [id]: action }));
  };

  const handleSave = (e: React.MouseEvent) => {
    e.stopPropagation();
    onSaveActions?.(
      Object.entries(actionMap).map(([alertId, action]) => ({
        alertId,
        action,
      })),
    );
  };

  const countBySeverity = alerts.reduce<Record<string, number>>((acc, a) => {
    acc[a.severityCode] = (acc[a.severityCode] || 0) + 1;
    return acc;
  }, {});

  const hasPendingActions = Object.keys(actionMap).length > 0;

  if (alerts.length === 0) return null;

  return (
    <Accordion>
      <AccordionItem value="alerts" className="border-0">
        <AccordionTrigger className="min-h-14 cursor-pointer border border-primary/20 bg-primary/10 px-4 py-2.5 hover:bg-primary/10 hover:no-underline">
          <div className="flex w-full items-center justify-between">
            <div className="flex items-center gap-2.5">
              <span className="text-label-medium text-foreground">Alerts</span>
              {(["INSIGHT", "WATCH", "NEED_ACTION"] as const).map((code) =>
                countBySeverity[code] ? (
                  <span
                    key={code}
                    className={`flex h-6 w-6 items-center justify-center rounded-full text-xs font-semibold leading-none ${SEVERITY_BG[code]}`}
                  >
                    {countBySeverity[code]}
                  </span>
                ) : null,
              )}
            </div>
            {hasPendingActions && onSaveActions && (
              <Button
                variant="outline"
                size="sm"
                onClick={handleSave}
                disabled={isSaving}
              >
                {isSaving ? "Saving..." : "Save"}
              </Button>
            )}
          </div>
        </AccordionTrigger>
        <AccordionContent className="p-0 pb-0">
          <div className="grid grid-cols-3 gap-2.5 border border-t-0 border-primary/20 p-3">
            {alerts.map((alert) => (
              <AlertCard
                key={alert.id}
                {...alert}
                selectedAction={actionMap[alert.id] ?? null}
                onActionChange={handleActionChange(alert.id)}
              />
            ))}
          </div>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

// ---------------------------------------------------------------------------
// LoanScenarioSection
// ---------------------------------------------------------------------------

export interface LoanScenarioSectionProps {
  /** Override the section heading. Defaults to "Loan Scenario (Loan Quiz)". */
  title?: string;
  /** "Lending Type" — e.g. "Home Loan", "Investment Loan" */
  lendingType?: string;
  purposeOfLoan?: string;
  loanAmount?: string;
  propertyEstimate?: string;
  estLvr?: string;
  /** Cash or deposit available e.g. "$120,000" */
  cashDeposit?: string;
  propertyAddress?: string;
  duration?: string;
  importantFeatures?: string;
  topThreePriorities?: string;
}

/**
 * Read-only Loan Quiz card — 4-column grid matching the LoanQuiz component in backoffice.
 *
 * Row 1: Lending Type | Purpose of Loan | Loan Amount | Property Estimate
 * Row 2: EST LVR | Cash/Deposit | Property Address | Duration
 * Row 3: Important Features | Top Three Priorities
 *
 * Mirrors `LoanQuiz.tsx` in backoffice OpportunityDetailsDrawer.
 */
export function LoanScenarioSection({
  title = "Loan Scenario (Loan Quiz)",
  lendingType,
  purposeOfLoan,
  loanAmount,
  propertyEstimate,
  estLvr,
  cashDeposit,
  propertyAddress,
  duration,
  importantFeatures,
  topThreePriorities,
}: LoanScenarioSectionProps) {
  return (
    <div className="border border-border p-4">
      <div className="mb-4">
        <FinancialSectionLabel>{title}</FinancialSectionLabel>
      </div>
      <div className="grid grid-cols-4 gap-x-6 gap-y-4">
        {/* Row 1 */}
        <FinancialDetailField label="Lending Type" value={lendingType} />
        <FinancialDetailField label="Purpose of Loan" value={purposeOfLoan} />
        <FinancialDetailField label="Loan Amount" value={loanAmount} />
        <FinancialDetailField
          label="Property Estimate"
          value={propertyEstimate}
        />
        {/* Row 2 */}
        <FinancialDetailField label="EST LVR" value={estLvr} />
        <FinancialDetailField label="Cash/Deposit" value={cashDeposit} />
        <FinancialDetailField
          label="Property Address"
          value={propertyAddress}
        />
        <FinancialDetailField label="Duration" value={duration} />
        {/* Row 3 */}
        <FinancialDetailField
          label="Important Features"
          value={importantFeatures}
        />
        <FinancialDetailField
          label="Top Three Priorities"
          value={topThreePriorities}
        />
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// FinancialBottomSummary
// ---------------------------------------------------------------------------

export interface BottomSummaryLineItem {
  label: string;
  value?: string | null;
  destructive?: boolean;
}

export interface FinancialBottomSummaryProps {
  /** Incoming vs Outgoing Summary card items. */
  cashflowItems?: BottomSummaryLineItem[];
  /** Net surplus/deficit value e.g. "$1,050". */
  netSurplus?: string;
  /** Whether net surplus is negative (renders in destructive color). */
  netSurplusDestructive?: boolean;
  /** Assets card items. */
  assetItems?: BottomSummaryLineItem[];
  /** Total assets value e.g. "$3,630,000". */
  totalAssets?: string;
  /** Total liabilities value e.g. "$1,263,200". Renders in destructive. */
  totalLiabilities?: string;
  /** Net position value e.g. "$2,366,800". */
  netPosition?: string;
  /** Whether net position is negative. */
  netPositionDestructive?: boolean;
}

/**
 * Three summary cards stacked vertically:
 * 1. Incoming vs Outgoing Summary — cashflow line items + net surplus
 * 2. Assets — asset line items + total
 * 3. Net Position — total liabilities + assets + net position
 *
 * Mirrors `financial-bottom-summary.tsx` in backoffice.
 */
export function FinancialBottomSummary({
  cashflowItems = [],
  netSurplus,
  netSurplusDestructive = false,
  assetItems = [],
  totalAssets,
  totalLiabilities,
  netPosition,
  netPositionDestructive = false,
}: FinancialBottomSummaryProps) {
  return (
    <div className="border border-border">
      {/* Card 1: Incoming vs Outgoing Summary */}
      <div className="p-4">
        <div className="mb-3">
          <FinancialSectionLabel>
            Incoming vs Outgoing Summary
          </FinancialSectionLabel>
        </div>
        <div className="flex flex-col">
          {cashflowItems.map((item) => (
            <FinancialLineItem
              key={item.label}
              label={item.label}
              value={item.value}
              destructive={item.destructive}
            />
          ))}
        </div>
        <FinancialSubtotalFrame>
          <FinancialSubtotalBlock
            monthlyAverage={netSurplus}
            label={netSurplusDestructive ? "Net Deficit" : "Net Surplus"}
          />
        </FinancialSubtotalFrame>
      </div>

      <Separator />

      {/* Card 2: Assets */}
      <div className="p-4">
        <div className="mb-3">
          <FinancialSectionLabel>Assets</FinancialSectionLabel>
        </div>
        <div className="flex flex-col">
          {assetItems.map((item) => (
            <FinancialLineItem
              key={item.label}
              label={item.label}
              value={item.value}
              destructive={item.destructive}
            />
          ))}
        </div>
        <FinancialSubtotalFrame>
          <FinancialSubtotalBlock
            monthlyAverage={totalAssets}
            label="Total Assets"
          />
        </FinancialSubtotalFrame>
      </div>

      <Separator />

      {/* Card 3: Net Position */}
      <div className="p-4">
        <div className="mb-3">
          <FinancialSectionLabel>Net Position</FinancialSectionLabel>
        </div>
        <div className="flex flex-col">
          <FinancialLineItem
            label="Total Liabilities"
            value={totalLiabilities}
            destructive
          />
          <FinancialLineItem label="Total Assets" value={totalAssets} />
        </div>
        <FinancialSubtotalFrame>
          <FinancialSubtotalBlock
            monthlyAverage={netPosition}
            label={netPositionDestructive ? "Net Deficit" : "Net Position"}
          />
        </FinancialSubtotalFrame>
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// FinancialViewSection
// ---------------------------------------------------------------------------

export interface FinancialViewSectionProps {
  /** Override the "Financial View" section label. */
  title?: string;
  income?: IncomeExpenseSectionProps["income"];
  expenses?: IncomeExpenseSectionProps["expenses"];
  futurePayments?: IncomeExpenseSectionProps["futurePayments"];
  futurePaymentsHeading?: string;
  /** Section heading for property columns. Defaults to "Property Assets and Liabilities". */
  propertyTitle?: string;
  /** Each item renders as a borderless property column with a 1px divider. */
  properties?: PropertyCardProps[];
  /** Section heading for current liabilities. Defaults to "Current Liabilities". */
  currentLiabilitiesTitle?: string;
  /** Each item maps 1:1 to a DebtCard. */
  currentLiabilities?: DebtCardProps[];
}

/**
 * Composite Financial View card — wraps income, property and current liabilities
 * inside a single bordered container, matching the Figma Financial View design.
 *
 * Property columns render without individual card borders (borderless),
 * separated by a 1px divider — same visual language as the income columns.
 * Current Liabilities (DebtCards) retain their individual borders.
 */
export function FinancialViewSection({
  title = "Financial View",
  income,
  expenses,
  futurePayments,
  futurePaymentsHeading,
  propertyTitle = "Property Assets and Liabilities",
  properties = [],
  currentLiabilitiesTitle = "Current Liabilities",
  currentLiabilities = [],
}: FinancialViewSectionProps) {
  return (
    <div className="border border-border p-4 flex flex-col gap-4">
      <FinancialSectionLabel>{title}</FinancialSectionLabel>
      <IncomeExpenseSection
        income={income}
        expenses={expenses}
        futurePayments={futurePayments}
        futurePaymentsHeading={futurePaymentsHeading}
      />
      {properties.length > 0 && (
        <>
          <Separator />
          <PropertyHoldingsSection
            title={propertyTitle}
            items={properties}
            borderless
          />
        </>
      )}
      {currentLiabilities.length > 0 && (
        <>
          <Separator />
          <DebtSection
            title={currentLiabilitiesTitle}
            items={currentLiabilities}
          />
        </>
      )}
    </div>
  );
}