"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  addQuoteItem,
  removeQuoteItem,
  updateAcceptedTotal,
} from "@/app/admin/clients/[id]/quote-actions";
import type { QuoteItemWithLabel } from "@/lib/admin-queries";
import type { Service } from "@/db/schema";

type Props = {
  clientId: string;
  items: QuoteItemWithLabel[];
  activeServices: Service[];
  acceptedTotal: string;
};

export function QuoteTab({ clientId, items, activeServices, acceptedTotal }: Props) {
  const [showCustom, setShowCustom] = useState(false);
  const [addError, setAddError] = useState<string | null>(null);
  const [totalError, setTotalError] = useState<string | null>(null);
  // For catalog mode: pre-fill unit_price when service is selected
  const [selectedServicePrice, setSelectedServicePrice] = useState<string>("");
  const [, startTransition] = useTransition();
  const router = useRouter();

  const calculatedTotal = items.reduce(
    (sum, item) => sum + parseFloat(item.subtotal),
    0
  );

  function handleAddItem(fd: FormData) {
    setAddError(null);
    startTransition(async () => {
      try {
        await addQuoteItem(clientId, fd);
        router.refresh();
      } catch (e) {
        setAddError(e instanceof Error ? e.message : "Errore nell'aggiunta");
      }
    });
  }

  function handleRemove(quoteItemId: string) {
    startTransition(async () => {
      await removeQuoteItem(quoteItemId, clientId);
      router.refresh();
    });
  }

  function handleSaveTotal(fd: FormData) {
    setTotalError(null);
    startTransition(async () => {
      try {
        await updateAcceptedTotal(clientId, fd);
        router.refresh();
      } catch (e) {
        setTotalError(
          e instanceof Error ? e.message : "Errore nel salvataggio"
        );
      }
    });
  }

  return (
    <div className="space-y-6 max-w-2xl">

      {/* Section 1: Add items */}
      <div className="bg-white border border-[#e5e7eb] rounded-xl p-4 space-y-4">
        <h3 className="text-xs font-bold text-[#71717a] uppercase tracking-wider">
          Aggiungi voci
        </h3>

        {!showCustom ? (
          /* Catalog mode */
          <form action={handleAddItem} className="space-y-3">
            <input type="hidden" name="custom_label" value="" />
            <div className="flex items-end gap-3 flex-wrap">
              <div className="flex-1 min-w-[180px] space-y-1">
                <Label htmlFor="service_id">Seleziona dal catalogo</Label>
                <select
                  name="service_id"
                  id="service_id"
                  className="w-full border border-[#e5e7eb] rounded-md px-3 py-2 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-[#1A463C]/30"
                  onChange={(e) => {
                    const svc = activeServices.find((s) => s.id === e.target.value);
                    setSelectedServicePrice(
                      svc ? parseFloat(svc.unit_price).toFixed(2) : ""
                    );
                  }}
                  required
                >
                  <option value="">— Scegli servizio —</option>
                  {activeServices.map((s) => (
                    <option key={s.id} value={s.id}>
                      {s.name} (€
                      {parseFloat(s.unit_price).toLocaleString("it-IT", {
                        minimumFractionDigits: 2,
                      })}
                      )
                    </option>
                  ))}
                </select>
              </div>
              <div className="w-28 space-y-1">
                <Label htmlFor="unit_price_catalog">Prezzo unit.</Label>
                <Input
                  id="unit_price_catalog"
                  name="unit_price"
                  type="number"
                  step="0.01"
                  min="0.01"
                  value={selectedServicePrice}
                  onChange={(e) => setSelectedServicePrice(e.target.value)}
                  placeholder="0.00"
                  required
                />
              </div>
              <div className="w-20 space-y-1">
                <Label htmlFor="quantity_catalog">Qty</Label>
                <Input
                  id="quantity_catalog"
                  name="quantity"
                  type="number"
                  step="0.01"
                  min="0.01"
                  defaultValue="1"
                  required
                />
              </div>
              <Button
                type="submit"
                size="sm"
                className="bg-[#1A463C] text-white hover:bg-[#1A463C]/90"
              >
                Aggiungi
              </Button>
            </div>
            <button
              type="button"
              onClick={() => {
                setShowCustom(true);
                setAddError(null);
              }}
              className="text-xs text-[#71717a] hover:text-[#1a1a1a] underline"
            >
              Oppure aggiungi voce libera →
            </button>
            {addError && <p className="text-xs text-red-600">{addError}</p>}
          </form>
        ) : (
          /* Freeform mode */
          <form action={handleAddItem} className="space-y-3">
            <input type="hidden" name="service_id" value="" />
            <div className="space-y-1">
              <Label htmlFor="custom_label">Nome voce</Label>
              <Input
                id="custom_label"
                name="custom_label"
                placeholder="es. Consulenza extra, Spese viaggi"
                required
              />
            </div>
            <div className="flex gap-3 flex-wrap">
              <div className="flex-1 min-w-[120px] space-y-1">
                <Label htmlFor="unit_price_custom">Prezzo unitario (€)</Label>
                <Input
                  id="unit_price_custom"
                  name="unit_price"
                  type="number"
                  step="0.01"
                  min="0.01"
                  placeholder="0.00"
                  required
                />
              </div>
              <div className="w-20 space-y-1">
                <Label htmlFor="quantity_custom">Qty</Label>
                <Input
                  id="quantity_custom"
                  name="quantity"
                  type="number"
                  step="0.01"
                  min="0.01"
                  defaultValue="1"
                  required
                />
              </div>
            </div>
            {addError && <p className="text-xs text-red-600">{addError}</p>}
            <div className="flex gap-2">
              <Button
                type="submit"
                size="sm"
                className="bg-[#1A463C] text-white hover:bg-[#1A463C]/90"
              >
                Aggiungi voce libera
              </Button>
              <Button
                type="button"
                variant="ghost"
                size="sm"
                onClick={() => {
                  setShowCustom(false);
                  setAddError(null);
                }}
              >
                Torna al catalogo
              </Button>
            </div>
          </form>
        )}
      </div>

      {/* Section 2: Quote items table + calculated total */}
      <div className="bg-white border border-[#e5e7eb] rounded-xl p-4">
        <h3 className="text-xs font-bold text-[#71717a] uppercase tracking-wider mb-3">
          Voci preventivo
        </h3>
        {items.length === 0 ? (
          <p className="text-sm text-[#71717a] py-4 text-center">
            Nessuna voce aggiunta. Seleziona dal catalogo per iniziare.
          </p>
        ) : (
          <>
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead className="border-b border-[#e5e7eb]">
                  <tr>
                    <th className="text-left py-2 px-2 font-medium text-[#71717a]">
                      Voce
                    </th>
                    <th className="text-right py-2 px-2 font-medium text-[#71717a]">
                      Qty
                    </th>
                    <th className="text-right py-2 px-2 font-medium text-[#71717a]">
                      Prezzo unit.
                    </th>
                    <th className="text-right py-2 px-2 font-medium text-[#71717a]">
                      Subtotale
                    </th>
                    <th className="py-2 px-2"></th>
                  </tr>
                </thead>
                <tbody>
                  {items.map((item) => (
                    <tr
                      key={item.id}
                      className="border-b border-[#f4f4f5] hover:bg-[#f9f9f9]"
                    >
                      <td className="py-2 px-2 text-[#1a1a1a]">{item.label}</td>
                      <td className="py-2 px-2 text-right tabular-nums">
                        {parseFloat(item.quantity).toLocaleString("it-IT", {
                          minimumFractionDigits: 2,
                        })}
                      </td>
                      <td className="py-2 px-2 text-right tabular-nums font-mono">
                        €
                        {parseFloat(item.unit_price).toLocaleString("it-IT", {
                          minimumFractionDigits: 2,
                        })}
                      </td>
                      <td className="py-2 px-2 text-right tabular-nums font-mono font-medium">
                        €
                        {parseFloat(item.subtotal).toLocaleString("it-IT", {
                          minimumFractionDigits: 2,
                        })}
                      </td>
                      <td className="py-2 px-2 text-right">
                        <button
                          type="button"
                          onClick={() => handleRemove(item.id)}
                          className="text-xs text-[#71717a] hover:text-red-600 transition-colors"
                        >
                          Rimuovi
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <div className="mt-3 pt-3 border-t border-[#e5e7eb] flex justify-end">
              <p className="font-bold text-[#1a1a1a] tabular-nums">
                Totale calcolato: €
                {calculatedTotal.toLocaleString("it-IT", {
                  minimumFractionDigits: 2,
                })}
              </p>
            </div>
          </>
        )}
      </div>

      {/* Section 3: Accepted total */}
      <div className="bg-white border border-[#e5e7eb] rounded-xl p-4 space-y-3">
        <h3 className="text-xs font-bold text-[#71717a] uppercase tracking-wider">
          Totale accettato dal cliente
        </h3>
        <form action={handleSaveTotal} className="flex items-end gap-3">
          <div className="flex-1 max-w-[200px] space-y-1">
            <Label htmlFor="accepted_total">Importo (€)</Label>
            <Input
              id="accepted_total"
              name="accepted_total"
              type="number"
              step="0.01"
              min="0"
              defaultValue={parseFloat(acceptedTotal).toFixed(2)}
            />
          </div>
          <Button
            type="submit"
            size="sm"
            className="bg-[#1A463C] text-white hover:bg-[#1A463C]/90"
          >
            Salva
          </Button>
        </form>
        {totalError && <p className="text-xs text-red-600">{totalError}</p>}
        <p className="text-xs text-[#71717a]">
          Il cliente vede solo questo importo, non le singole voci del preventivo.
        </p>
      </div>

    </div>
  );
}
