import * as React from "react";
import { X } from "lucide-react";
import { Sheet, SheetContent } from "./sheet";
import { Button } from "./button";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
import { Spinner } from "./spinner";

/**
 * Financial drawer shells — WealthX DS (Level 5)
 *
 * These are the outermost drawer containers. They compose the Level 4 sections
 * into full-screen right-side panels used across backoffice.
 *
 * ```
 * Level 2  →  FinancialDetailField, FinancialLvrBar …         (financial-primitives)
 * Level 3  →  PropertyCard, DebtCard, AlertCard …             (financial-cards)
 * Level 4  →  PropertyHoldingsSection, DebtSection …          (financial-sections)
 * Level 5  →  SummaryReportDrawer, OpportunityDetailsDrawer … ← here
 * ```
 *
 * Both components are **visual shells** — they own the chrome (header, tabs,
 * scrollable viewport) but delegate all data and content to the consuming app
 * via slot props.
 */

// ---------------------------------------------------------------------------
// SummaryReportDrawer
// ---------------------------------------------------------------------------

export type SummaryViewMode = "individual" | "joint";
export type SummaryJointSubTab = "joint" | "userA" | "userB";

export interface SummaryReportDrawerProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  /** Primary contact name shown in the header. */
  contactName?: string;
  /** Whether a secondary contact has been added for joint view. */
  hasJointView?: boolean;
  /** Active view mode — individual or joint. */
  viewMode?: SummaryViewMode;
  onViewModeChange?: (mode: SummaryViewMode) => void;
  /** Active sub-tab when in joint + joint mode. */
  jointSubTab?: SummaryJointSubTab;
  onJointSubTabChange?: (tab: SummaryJointSubTab) => void;
  /** Display name for the primary applicant in joint view. */
  jointMainUserName?: string;
  /** Display name for the secondary applicant in joint view. */
  jointCoApplicantName?: string;
  /** Called when "Create Joint View" is clicked (no joint view yet). */
  onCreateJointView?: () => void;
  /** Called when "Remove Joint View" is clicked. */
  onRemoveJointView?: () => void;
  /**
   * Row of action buttons rendered below the header chrome.
   * Typically: Export button, Send Report button, etc.
   */
  actionButtons?: React.ReactNode;
  /**
   * Alert accordion shown below the action buttons row.
   * Pass an `<AlertAccordion>` from financial-sections when alerts exist.
   */
  alerts?: React.ReactNode;
  /**
   * When true, hides `children` and `actionButtons`/`alerts` and shows a
   * centered `<Spinner>` instead.
   */
  isLoading?: boolean;
  /**
   * The scrollable financial content — stack Level 4 sections and charts here.
   * Recommended order (mirrors backoffice): charts → PropertyHoldings → Debt →
   * OtherLiabilities → IncomeExpense → AlertAccordion.
   */
  children?: React.ReactNode;
}

/**
 * Right-side sheet shell for the Summary Report Drawer.
 *
 * Handles the header chrome (contact name, Individual/Joint view toggle,
 * joint sub-tabs, close button) and a scrollable content viewport.
 * All financial content is passed as `children`.
 */
export function SummaryReportDrawer({
  open,
  onOpenChange,
  contactName = "Contact",
  hasJointView = false,
  viewMode = "individual",
  onViewModeChange,
  jointSubTab = "joint",
  onJointSubTabChange,
  jointMainUserName = "User A",
  jointCoApplicantName = "User B",
  onCreateJointView,
  onRemoveJointView,
  actionButtons,
  alerts,
  isLoading = false,
  children,
}: SummaryReportDrawerProps) {
  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent
        side="right"
        showCloseButton={false}
        className="w-[min(1080px,90vw)] max-w-none p-0"
      >
        <div className="flex max-h-[100dvh] min-h-0 flex-1 flex-col gap-4 overflow-hidden px-8 py-6">
          {/* ── Header chrome ── */}
          <div className="shrink-0 space-y-4">
            <div className="flex flex-col gap-3">
              {/* Top row: view mode toggle + close */}
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  {hasJointView ? (
                    <>
                      <div className="flex gap-1">
                        <Button
                          variant={
                            viewMode === "individual" ? "default" : "outline"
                          }
                          size="sm"
                          onClick={() => onViewModeChange?.("individual")}
                        >
                          Individual View
                        </Button>
                        <Button
                          variant={viewMode === "joint" ? "default" : "outline"}
                          size="sm"
                          onClick={() => onViewModeChange?.("joint")}
                        >
                          Joint View
                        </Button>
                      </div>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={onRemoveJointView}
                      >
                        Remove Joint View
                      </Button>
                    </>
                  ) : (
                    <>
                      <span className="text-label-medium text-foreground">
                        {contactName} View
                      </span>
                      <Button
                        variant="outline-secondary"
                        size="sm"
                        onClick={onCreateJointView}
                      >
                        Create Joint View
                      </Button>
                    </>
                  )}
                </div>

                <Button
                  variant="ghost"
                  size="icon-sm"
                  onClick={() => onOpenChange(false)}
                  aria-label="Close drawer"
                >
                  <X className="h-4 w-4" />
                </Button>
              </div>

              {/* Joint sub-tabs — default (pill) variant, only in joint+joint mode */}
              {hasJointView && viewMode === "joint" && (
                <Tabs
                  value={jointSubTab}
                  onValueChange={(v) =>
                    onJointSubTabChange?.(v as SummaryJointSubTab)
                  }
                >
                  <TabsList>
                    <TabsTrigger value="joint">Joint View</TabsTrigger>
                    <TabsTrigger value="userA">
                      {jointMainUserName} View
                    </TabsTrigger>
                    <TabsTrigger value="userB">
                      {jointCoApplicantName} View
                    </TabsTrigger>
                  </TabsList>
                </Tabs>
              )}
            </div>

            {/* Action buttons + alerts — hidden while loading */}
            {!isLoading && actionButtons && <div>{actionButtons}</div>}
            {!isLoading && alerts && <div>{alerts}</div>}
          </div>

          {/* ── Scrollable content viewport ── */}
          <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
            {isLoading ? (
              <div className="flex h-full min-h-[200px] items-center justify-center py-12">
                <Spinner size="xl" className="text-primary" />
              </div>
            ) : (
              children
            )}
          </div>
        </div>
      </SheetContent>
    </Sheet>
  );
}

// ---------------------------------------------------------------------------
// OpportunityDetailsDrawer
// ---------------------------------------------------------------------------

export type OpportunityTab =
  | "summary"
  | "tasks"
  | "bankStatement"
  | "policyAI"
  | "runServicing"
  | "emailAndNotes"
  | "syncLoanApp";

const OPPORTUNITY_TABS: { value: OpportunityTab; label: string }[] = [
  { value: "summary", label: "Summary" },
  { value: "tasks", label: "Tasks" },
  { value: "bankStatement", label: "Reports & Statements" },
  { value: "policyAI", label: "Policy AI" },
  { value: "runServicing", label: "Run Servicing" },
  { value: "emailAndNotes", label: "Email & Notes" },
  { value: "syncLoanApp", label: "Sync Loan App" },
];

export interface OpportunityDetailsDrawerProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  /** Default active tab on open. Defaults to "summary". */
  defaultTab?: OpportunityTab;
  /**
   * Content slots keyed by tab value.
   * Pass only the tabs you want to render content for — unset tabs show nothing.
   *
   * ```tsx
   * <OpportunityDetailsDrawer
   *   tabs={{
   *     summary: <SummaryTabContent />,
   *     tasks: <TasksTabContent />,
   *   }}
   * />
   * ```
   */
  tabs?: Partial<Record<OpportunityTab, React.ReactNode>>;
}

/**
 * Right-side sheet shell for the Opportunity Details Drawer.
 *
 * Renders a line-variant tab bar (Summary · Tasks · Reports & Statements ·
 * Policy AI · Run Servicing · Email & Notes · Sync Loan App) with a close
 * button, and a scrollable `TabsContent` panel for each active tab.
 *
 * Uses the shadcn `Tabs` component internally so each tab's content panel
 * is properly connected to its trigger via Base UI's Tabs.Root context.
 */
export function OpportunityDetailsDrawer({
  open,
  onOpenChange,
  defaultTab = "summary",
  tabs,
}: OpportunityDetailsDrawerProps) {
  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent
        side="right"
        showCloseButton={false}
        className="w-[min(1048px,100vw)] max-w-none p-0"
      >
        {/*
         * Tabs.Root wraps both the header and content so that TabsContent panels
         * are in scope and automatically shown/hidden by Base UI's tab context.
         * gap-0 overrides the default gap-2 on Tabs.
         */}
        <Tabs defaultValue={defaultTab} className="h-full gap-0">
          {/*
           * Tab header: no pt-3 so the header height hugs the tab section.
           * TabsList gets group-data-[orientation=horizontal]/tabs:h-12 to
           * override the built-in conditional h-9 at equal specificity via
           * cascade order. Triggers use flex-none to hug their label width
           * (overrides the built-in flex-1 that was stretching them equally).
           * No overflow-x-auto wrapper — that forces overflow-y:auto (CSS spec)
           * and clips the line-variant after:bottom-[-5px] indicator.
           */}
          <div className="flex shrink-0 items-end border-b border-border">
            <TabsList
              variant="line"
              className="flex-1 group-data-[orientation=horizontal]/tabs:h-auto justify-start rounded-none bg-transparent p-0"
            >
              {OPPORTUNITY_TABS.map((tab) => (
                <TabsTrigger
                  key={tab.value}
                  value={tab.value}
                  className="flex-none h-auto py-3 px-4 text-sm"
                >
                  {tab.label}
                </TabsTrigger>
              ))}
            </TabsList>

            {/* Close button */}
            <div className="flex shrink-0 self-center items-center pr-3">
              <Button
                variant="ghost"
                size="icon-sm"
                onClick={() => onOpenChange(false)}
                aria-label="Close drawer"
              >
                <X className="h-4 w-4" />
              </Button>
            </div>
          </div>

          {/* ── Tab content panels ── */}
          <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
            {OPPORTUNITY_TABS.map((tab) => (
              <TabsContent
                key={tab.value}
                value={tab.value}
                className="mt-0 flex-none p-5 outline-none"
              >
                {tabs?.[tab.value]}
              </TabsContent>
            ))}
          </div>
        </Tabs>
      </SheetContent>
    </Sheet>
  );
}