"use client";

import * as React from "react";
import { PaymentStructureView } from "./payment-structure-view";
import type { PaymentStructure } from "./types";
import { cn } from "@/lib/utils";

export interface DealPaymentManagerProps {
  /** Standardized title for the section */
  title: string;
  /** Description or instructions */
  description: React.ReactNode;
  /** The mapped payment structure to display */
  payment: PaymentStructure;
  /** Whether the user can edit */
  readOnly?: boolean;
  /** Whether a save is in progress */
  isSaving?: boolean;
  /** Extra UI elements to show in the header (e.g. selectors) */
  headerActions?: React.ReactNode;
  /** Secondary action/picker rows (e.g. Sales Deal picker) */
  selectors?: React.ReactNode;
  /** Warning message if saves aren't possible (e.g. no lead linked) */
  saveWarning?: string | null;
  onUpdate: (p: any) => Promise<void>;
  /** Optional container className */
  className?: string;
  /** If true, the upfront status checkbox will auto-persist when changed */
  autoPersistUpfrontStatus?: boolean;
  upfrontStatusReadOnly?: boolean;
  /** Passed through to {@link PaymentStructureView} (default true). */
  showAddCustomPaymentForm?: boolean;
  /** When true, Schedule “Project value” is not editable (customer detail). */
  lockProjectValueField?: boolean;
}

/**
 * A shared container for deal payment management, used in:
 * - BusinessDealDetailView (sales-deals/:id)
 * - CustomerDetailView (customers/:id)
 */
export function DealPaymentManager({
  title,
  description,
  payment,
  readOnly = false,
  isSaving = false,
  headerActions,
  selectors,
  saveWarning,
  onUpdate,
  className,
  autoPersistUpfrontStatus = false,
  upfrontStatusReadOnly = false,
  showAddCustomPaymentForm = true,
  lockProjectValueField = false,
}: DealPaymentManagerProps) {
  return (
    <div className={cn("space-y-4", className)}>
      {/* 1. Standardized Header Box */}
      <div className="flex flex-col gap-3 rounded-2xl border border-gray-100 bg-gray-50/50 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
        <div className="min-w-0">
          <h3 className="text-[14px] font-semibold text-gray-900 font-['Lexend']">
            {title}
          </h3>
          <p className="text-[12px] text-gray-500 mt-0.5 max-w-xl">
            {description}
          </p>
        </div>
        <div className="flex items-center gap-2 shrink-0">
          {headerActions}
        </div>
      </div>

      {/* 2. Selectors / Pickers (Sales Deal picker, etc) */}
      {selectors && (
        <div className="space-y-3 px-1">
          {selectors}
        </div>
      )}

      {/* 3. Source Indicator / Warning Alert */}
      {/* {source && source !== "proxy" && sourceId && (
        <div className="flex items-center gap-2 rounded-xl border border-gray-100 bg-gray-50/60 px-3 py-2">
          <p className="text-[11px] text-gray-500">
            <span className="font-semibold text-gray-700 uppercase tracking-tight mr-1">
              Data Source:
            </span>
            {source === "lead" ? (
              "Terms linked to original Lead record"
            ) : source === "deal" ? (
              "Terms stored directly on this Business Deal"
            ) : source === "dealEmpty" ? (
              "New payment plan for this Business Deal"
            ) : (
              "Draft (not yet persisted)"
            )}
          </p>
        </div>
      )} */}

      {saveWarning && (
        <div className="rounded-xl border border-amber-100 bg-amber-50/70 px-3 py-2">
          <p className="text-[12px] text-amber-900 leading-snug">
            {saveWarning}
          </p>
        </div>
      )}

      {/* 4. The Core Payment Component */}
      <div className="min-w-0 rounded-2xl border border-gray-100 bg-white p-4 shadow-sm sm:p-6">
        <PaymentStructureView
          payment={payment}
          readOnly={readOnly}
          isSaving={isSaving}
          upfrontStatusReadOnly={upfrontStatusReadOnly}
          autoPersistUpfrontStatus={autoPersistUpfrontStatus}
          showAddCustomPaymentForm={showAddCustomPaymentForm}
          lockProjectValueField={lockProjectValueField}
          onUpdate={onUpdate}
        />
      </div>
    </div>
  );
}