import { useEffect, useMemo, useRef, useState } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Checkbox } from "@/components/ui/checkbox";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { fmtBDT } from "@/lib/format";
import { Check, X, UserPlus } from "lucide-react";

export type PaymentResult = {
  subtotal: number;
  discountPct: number;
  discountAmt: number;
  lessAmt: number;
  shipping: number;
  vatPct: number;
  vatAmt: number;
  payable: number;
  paid: number;
  change: number;
  due: number;
  method: "cash" | "bank" | "bkash" | "card";
  salesBy: string | null;
  remark: string;
  sendSms: boolean;
};

type Employee = { id: string; full_name: string | null };

export function PaymentModal({
  open,
  onClose,
  subtotal,
  employees = [],
  saving = false,
  onConfirm,
  onAddEmployee,
}: {
  open: boolean;
  onClose: () => void;
  subtotal: number;
  employees?: Employee[];
  saving?: boolean;
  onConfirm: (r: PaymentResult) => void | Promise<void>;
  onAddEmployee?: () => void;
}) {
  const [discountPct, setDiscountPct] = useState(0);
  const [lessAmt, setLessAmt] = useState(0);
  const [shipping, setShipping] = useState(0);
  const [vatPct, setVatPct] = useState(0);
  const [paid, setPaid] = useState<number | "">("");
  const [method, setMethod] = useState<PaymentResult["method"]>("cash");
  const [salesBy, setSalesBy] = useState<string>("none");
  const [remark, setRemark] = useState("");
  const [sendSms, setSendSms] = useState(false);
  const [error, setError] = useState<string>("");
  const paidRef = useRef<HTMLInputElement>(null);

  const discountAmt = useMemo(() => (subtotal * Math.max(0, discountPct)) / 100, [subtotal, discountPct]);
  const afterDiscount = useMemo(() => Math.max(0, subtotal - discountAmt - Math.max(0, lessAmt)), [subtotal, discountAmt, lessAmt]);
  const vatAmt = useMemo(() => (afterDiscount * Math.max(0, vatPct)) / 100, [afterDiscount, vatPct]);
  const payable = useMemo(() => Math.max(0, afterDiscount + Math.max(0, shipping) + vatAmt), [afterDiscount, shipping, vatAmt]);
  const paidNum = Number(paid) || 0;
  const change = useMemo(() => Math.max(0, paidNum - payable), [paidNum, payable]);
  const due = useMemo(() => Math.max(0, payable - paidNum), [paidNum, payable]);
  const returnAmt = change;

  useEffect(() => {
    if (open) {
      setDiscountPct(0); setLessAmt(0); setShipping(0); setVatPct(0);
      setPaid(""); setMethod("cash"); setSalesBy("none"); setRemark(""); setSendSms(false); setError("");
      setTimeout(() => paidRef.current?.focus(), 50);
    }
  }, [open]);

  const validate = (): boolean => {
    if (paidNum < 0) { setError("পরিশোধিত পরিমাণ ঋণাত্মক হতে পারবে না"); return false; }
    if (discountPct < 0 || discountPct > 100) { setError("ডিসকাউন্ট ০-১০০% এর মধ্যে হতে হবে"); return false; }
    if (vatPct < 0) { setError("ভ্যাট ঋণাত্মক হতে পারবে না"); return false; }
    if (lessAmt < 0 || shipping < 0) { setError("ঋণাত্মক মান অনুমোদিত নয়"); return false; }
    setError("");
    return true;
  };

  const submit = () => {
    if (saving) return;
    if (!validate()) return;
    onConfirm({
      subtotal, discountPct, discountAmt, lessAmt, shipping, vatPct, vatAmt,
      payable, paid: paidNum, change, due, method,
      salesBy: salesBy === "none" ? null : salesBy,
      remark, sendSms,
    });
  };

  const onKey = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && (e.target as HTMLElement).tagName !== "TEXTAREA") {
      e.preventDefault();
      submit();
    }
  };

  return (
    <Dialog open={open} onOpenChange={(o) => { if (!o) onClose(); }}>
      <DialogContent
        className="max-w-3xl p-0 overflow-hidden gap-0 rounded-xl border-0 shadow-2xl"
        onKeyDown={onKey}
      >
        <DialogHeader className="bg-slate-900 dark:bg-slate-950 px-5 py-3 flex-row items-center justify-between space-y-0">
          <DialogTitle className="text-white text-lg font-semibold tracking-wide">পেমেন্ট</DialogTitle>
          <button onClick={onClose} className="text-slate-300 hover:text-white transition" aria-label="Close">
            <X className="h-5 w-5" />
          </button>
        </DialogHeader>

        <div className="p-5 bg-background space-y-4 max-h-[80vh] overflow-y-auto">
          {/* Row 1 */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
            <ReadField label="মোট" value={fmtBDT(subtotal)} big />
            <ReadField label="ফেরত" value={fmtBDT(returnAmt)} tone="danger" big />
            <NumField label="ডিসকাউন্ট %" value={discountPct} onChange={setDiscountPct} suffix="%" />
          </div>

          {/* Row 2 */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
            <NumField label="কম" value={lessAmt} onChange={setLessAmt} />
            <NumField label="শিপিং" value={shipping} onChange={setShipping} />
            <NumField label="ভ্যাট %" value={vatPct} onChange={setVatPct} suffix="%" />
          </div>

          {/* Payable card */}
          <div className="rounded-xl bg-gradient-to-br from-emerald-500 to-emerald-600 text-white px-5 py-4 shadow-lg flex items-center justify-between">
            <div>
              <div className="text-xs uppercase tracking-wider opacity-90">পরিশোধযোগ্য</div>
              <div className="text-[11px] opacity-80 mt-0.5">মোট − ডিসকাউন্ট − কম + শিপিং + ভ্যাট</div>
            </div>
            <div className="text-3xl font-bold tabular-nums">{fmtBDT(payable)}</div>
          </div>

          {/* Row 3 */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
            <div>
              <Label className="text-xs">পরিশোধিত</Label>
              <Input
                ref={paidRef}
                type="number"
                inputMode="decimal"
                step="0.01"
                value={paid}
                onChange={(e) => setPaid(e.target.value === "" ? "" : Number(e.target.value))}
                className="h-10 text-lg font-semibold"
              />
            </div>
            <ReadField label="ফেরত" value={fmtBDT(change)} tone="danger" />
            <ReadField label="বকেয়া" value={fmtBDT(due)} tone={due > 0 ? "danger-bg" : "muted"} />
          </div>

          {/* Row 4 */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
            <ReadField label="ব্যালেন্স" value={fmtBDT(payable - paidNum)} />
            <div>
              <Label className="text-xs">পেমেন্ট মাধ্যম</Label>
              <Select value={method} onValueChange={(v) => setMethod(v as PaymentResult["method"])}>
                <SelectTrigger className="h-10"><SelectValue /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="cash">ক্যাশ</SelectItem>
                  <SelectItem value="bank">ব্যাংক ট্রান্সফার</SelectItem>
                  <SelectItem value="bkash">মোবাইল ব্যাংকিং</SelectItem>
                  <SelectItem value="card">কার্ড পেমেন্ট</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label className="text-xs">বিক্রেতা</Label>
              <div className="flex gap-1">
                <Select value={salesBy} onValueChange={setSalesBy}>
                  <SelectTrigger className="h-10"><SelectValue placeholder="নির্বাচন করুন" /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="none">— নেই —</SelectItem>
                    {employees.map((e) => (
                      <SelectItem key={e.id} value={e.id}>{e.full_name || "Unnamed"}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                {onAddEmployee && (
                  <Button type="button" variant="outline" size="icon" className="h-10 w-10 shrink-0" onClick={onAddEmployee} title="নতুন কর্মী">
                    <UserPlus className="h-4 w-4" />
                  </Button>
                )}
              </div>
            </div>
          </div>

          {/* Remark + SMS */}
          <div>
            <Label className="text-xs">মন্তব্য</Label>
            <Textarea
              value={remark}
              onChange={(e) => setRemark(e.target.value)}
              placeholder="একটি নোট যোগ করুন..."
              rows={2}
              className="resize-none"
            />
          </div>
          <label className="flex items-center gap-2 text-sm cursor-pointer select-none">
            <Checkbox checked={sendSms} onCheckedChange={(v) => setSendSms(!!v)} />
            কাস্টমারকে SMS পাঠান
          </label>

          {error && (
            <div className="text-sm text-destructive bg-destructive/10 border border-destructive/30 rounded-md px-3 py-2">
              {error}
            </div>
          )}

          <Button
            onClick={submit}
            disabled={saving}
            className="w-full h-12 text-base font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 shadow-md"
          >
            <Check className="h-5 w-5 mr-2" />
            {saving ? "সংরক্ষণ হচ্ছে..." : "সংরক্ষণ ও সম্পন্ন"}
          </Button>
          <div className="text-[11px] text-muted-foreground text-center">
            Enter = সংরক্ষণ &nbsp;·&nbsp; Esc = বন্ধ
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}

function ReadField({
  label, value, tone = "default", big = false,
}: { label: string; value: string; tone?: "default" | "danger" | "danger-bg" | "muted"; big?: boolean }) {
  const toneCls =
    tone === "danger" ? "text-red-600 dark:text-red-400"
    : tone === "danger-bg" ? "text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-900"
    : tone === "muted" ? "text-muted-foreground"
    : "";
  return (
    <div>
      <Label className="text-xs">{label}</Label>
      <div className={`h-10 flex items-center px-3 rounded-md border bg-muted/40 font-semibold tabular-nums ${big ? "text-lg" : ""} ${toneCls}`}>
        {value}
      </div>
    </div>
  );
}

function NumField({
  label, value, onChange, suffix,
}: { label: string; value: number; onChange: (n: number) => void; suffix?: string }) {
  return (
    <div>
      <Label className="text-xs">{label}</Label>
      <div className="relative">
        <Input
          type="number"
          inputMode="decimal"
          step="0.01"
          min={0}
          value={value || ""}
          onChange={(e) => onChange(Number(e.target.value) || 0)}
          className="h-10 pr-8"
        />
        {suffix && <span className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground text-sm">{suffix}</span>}
      </div>
    </div>
  );
}