"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import {
  updatePaymentStatus,
  updateAcceptedTotal,
  setPaymentPaidAt,
} from "@/app/admin/clients/[id]/actions";
import { setPaymentPlan } from "@/app/admin/projects/project-actions";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { SplitPaymentForm } from "@/components/admin/SplitPaymentForm";
import type { Payment } from "@/db/schema";

type Props = {
  payments: Payment[];
  acceptedTotal: string;
  clientId: string;
  projectId?: string; // set only from project detail page — enables init & split
  offersAcceptedTotal?: number; // sum of accepted_total from active offers
};

const statusLabels: Record<string, string> = {
  da_saldare: "Da saldare",
  inviata: "Inviata",
  saldato: "Saldato",
};

// paid_at (Date | string | null, serializzato sul confine RSC) → "YYYY-MM" per <input type="month">
function toMonthValue(paidAt: Date | string | null | undefined): string {
  if (!paidAt) {
    const now = new Date();
    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
  }
  const d = paidAt instanceof Date ? paidAt : new Date(paidAt);
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
}

type PlanMode = "single" | "two" | "three";

const planOptions: { mode: PlanMode; label: string; description: string }[] = [
  { mode: "single", label: "Pagamento unico", description: "100% in un'unica soluzione" },
  { mode: "two", label: "2 step", description: "Acconto 50% + Saldo 50%" },
  { mode: "three", label: "3 step", description: "50% + 30% + 20%" },
];

export function PaymentsTab({
  payments,
  acceptedTotal,
  clientId,
  projectId,
  offersAcceptedTotal = 0,
}: Props) {
  const router = useRouter();
  const [overrideValue, setOverrideValue] = useState(acceptedTotal);
  const [planLoading, setPlanLoading] = useState<PlanMode | null>(null);
  const [statusLoading, setStatusLoading] = useState<string | null>(null);

  const currentTotal = parseFloat(acceptedTotal) || 0;
  const offersTotal = offersAcceptedTotal;
  const hasOffers = offersTotal > 0;

  async function handleUseOffersTotal() {
    if (!projectId) return;
    setOverrideValue(offersTotal.toFixed(2));
    const fd = new FormData();
    fd.set("accepted_total", offersTotal.toFixed(2));
    await updateAcceptedTotal(projectId, fd);
    router.refresh();
  }

  async function handleSaveTotal(e: React.FormEvent) {
    e.preventDefault();
    const fd = new FormData();
    fd.set("accepted_total", overrideValue);
    await updateAcceptedTotal(clientId, fd);
    router.refresh();
  }

  async function handleSetPlan(mode: PlanMode) {
    if (!projectId) return;
    setPlanLoading(mode);
    try {
      const total = parseFloat(overrideValue) || currentTotal;
      await setPaymentPlan(projectId, mode, total);
      router.refresh();
    } finally {
      setPlanLoading(null);
    }
  }

  async function handleStatusUpdate(paymentId: string, status: string) {
    setStatusLoading(paymentId);
    try {
      await updatePaymentStatus(paymentId, clientId, status);
      router.refresh();
    } finally {
      setStatusLoading(null);
    }
  }

  async function handlePaidMonthUpdate(paymentId: string, monthStr: string) {
    if (!monthStr) return;
    setStatusLoading(paymentId);
    try {
      await setPaymentPaidAt(paymentId, clientId, monthStr);
      router.refresh();
    } finally {
      setStatusLoading(null);
    }
  }

  return (
    <div className="space-y-6 max-w-md">
      {/* Totale preventivo */}
      <div className="bg-white border border-gray-200 rounded-lg p-4 space-y-3">
        <h3 className="font-medium text-gray-900">Totale preventivo</h3>

        {/* Totale ereditato dalle offerte */}
        {hasOffers && (
          <div className="flex items-center justify-between bg-[#f9f9f9] border border-[#e5e7eb] rounded-md px-3 py-2 gap-3">
            <span className="text-sm text-[#71717a]">
              Ereditato dalle offerte attive:{" "}
              <span className="font-semibold text-[#1a1a1a]">
                €{" "}
                {offersTotal.toLocaleString("it-IT", { minimumFractionDigits: 2 })}
              </span>
            </span>
            {projectId && (
              <Button
                type="button"
                size="sm"
                variant="outline"
                onClick={handleUseOffersTotal}
                className="shrink-0 text-xs"
              >
                Usa questo totale
              </Button>
            )}
          </div>
        )}

        {/* Override manuale */}
        <form onSubmit={handleSaveTotal} className="flex items-end gap-3">
          <div className="space-y-1 flex-1">
            <Label htmlFor="accepted_total">Importo override (€)</Label>
            <Input
              id="accepted_total"
              name="accepted_total"
              type="number"
              step="0.01"
              min="0"
              value={overrideValue}
              onChange={(e) => setOverrideValue(e.target.value)}
              className="max-w-xs"
            />
          </div>
          <Button type="submit" size="sm">
            Salva
          </Button>
        </form>
      </div>

      {/* Selettore schema rate */}
      {projectId && (
        <div className="bg-white border border-gray-200 rounded-lg p-4 space-y-3">
          <h3 className="font-medium text-gray-900">Schema di pagamento</h3>
          <div className="flex gap-2 flex-wrap">
            {planOptions.map(({ mode, label, description }) => (
              <button
                key={mode}
                type="button"
                onClick={() => handleSetPlan(mode)}
                disabled={planLoading !== null}
                className={`flex-1 min-w-[120px] border rounded-lg px-3 py-2.5 text-left transition-colors ${
                  planLoading === mode
                    ? "border-[#1A463C] bg-[#1A463C]/5 opacity-70"
                    : "border-[#e5e7eb] hover:border-[#1A463C] hover:bg-[#1A463C]/5"
                }`}
              >
                <p className="text-sm font-medium text-[#1a1a1a]">{label}</p>
                <p className="text-xs text-[#71717a] mt-0.5">{description}</p>
              </button>
            ))}
          </div>
          <p className="text-xs text-[#71717a]">
            Selezionare uno schema cancella le rate esistenti e crea le nuove in base al totale corrente.
          </p>
        </div>
      )}

      {/* Empty state — project has no payments yet */}
      {projectId && payments.length === 0 && (
        <div className="bg-white border border-dashed border-gray-300 rounded-lg p-6 text-center">
          <p className="text-sm text-[#71717a] mb-4">
            Nessun pagamento configurato. Scegli uno schema sopra o crea le rate standard.
          </p>
          <Button
            type="button"
            size="sm"
            onClick={() => handleSetPlan("two")}
            disabled={planLoading !== null}
          >
            Crea Acconto &amp; Saldo (50/50)
          </Button>
        </div>
      )}

      {/* Payment rows */}
      {payments.map((p) => {
        const amount = parseFloat(p.amount);
        const pct = p.percent !== null && p.percent !== undefined
          ? parseFloat(String(p.percent))
          : null;
        return (
          <div
            key={p.id}
            className="bg-white border border-gray-200 rounded-lg p-4"
          >
            <div className="flex items-center justify-between mb-2">
              <div>
                <h3 className="font-medium text-gray-900">{p.label}</h3>
                {pct !== null && (
                  <p className="text-xs text-[#71717a]">{pct}% del totale</p>
                )}
              </div>
              <div className="flex items-center gap-2">
                <span className="text-sm text-gray-600">
                  €{" "}
                  {amount.toLocaleString("it-IT", {
                    minimumFractionDigits: 2,
                  })}
                </span>
                {projectId && amount > 0 && (
                  <SplitPaymentForm
                    paymentId={p.id}
                    projectId={projectId}
                    currentAmount={amount}
                  />
                )}
              </div>
            </div>
            <div className="flex items-center gap-2">
              <select
                name="status"
                defaultValue={p.status}
                disabled={statusLoading === p.id}
                onChange={async (e) => {
                  await handleStatusUpdate(p.id, e.target.value);
                }}
                className="text-sm border border-gray-200 rounded px-2 py-1.5 bg-white flex-1"
              >
                {Object.entries(statusLabels).map(([val, label]) => (
                  <option key={val} value={val}>
                    {label}
                  </option>
                ))}
              </select>
              {statusLoading === p.id && (
                <span className="text-xs text-[#71717a]">...</span>
              )}
            </div>
            {p.status === "saldato" && (
              <div className="flex items-center gap-2 mt-2">
                <Label htmlFor={`paid-${p.id}`} className="text-xs text-[#71717a] shrink-0">
                  Incassato nel mese
                </Label>
                <input
                  id={`paid-${p.id}`}
                  type="month"
                  defaultValue={toMonthValue(p.paid_at)}
                  disabled={statusLoading === p.id}
                  onChange={(e) => handlePaidMonthUpdate(p.id, e.target.value)}
                  className="text-sm border border-gray-200 rounded px-2 py-1 bg-white"
                />
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}
