"use client";

import { useState, useTransition } from "react";
import { toast } from "sonner";
import { setCommissionSlipProvider } from "@/app/admin/commission/actions";
import type { SlipProvider } from "@/lib/commission/slip-provider";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Settings } from "lucide-react";
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

export function AdminCommissionSlipProviderControl({ provider, configured }: {
  provider: SlipProvider; configured: Record<SlipProvider, boolean>;
}) {
  const [open, setOpen] = useState(false);
  const [selected, setSelected] = useState(provider);
  const [pending, startTransition] = useTransition();
  const [error, setError] = useState("");

  function save() {
    setError("");
    startTransition(async () => {
      try {
        const result = await setCommissionSlipProvider(selected);
        if (result.status === "error") { setError(result.message); return; }
        setOpen(false);
        toast.success("บันทึกผู้ให้บริการตรวจสลิปแล้ว");
      } catch { setError("บันทึกไม่สำเร็จ กรุณาลองอีกครั้งหรือโหลดหน้าใหม่"); }
    });
  }

  return <Dialog open={open} onOpenChange={(nextOpen) => {
    if (pending) return;
    if (nextOpen) { setSelected(provider); setError(""); }
    setOpen(nextOpen);
  }}>
    <DialogTrigger render={<Button type="button" variant="outline" size="icon-sm" aria-label="ตั้งค่าการชำระเงิน" />}>
      <Settings />
    </DialogTrigger>
    <DialogContent showCloseButton={!pending}>
      <DialogHeader><DialogTitle>ตั้งค่าการชำระเงิน</DialogTitle></DialogHeader>
      <FieldGroup>
        <Field data-invalid={Boolean(error)} data-disabled={pending}>
          <FieldLabel id="slip-provider-label">ผู้ให้บริการ</FieldLabel>
          <ToggleGroup variant="outline" value={[selected]} disabled={pending}
            aria-labelledby="slip-provider-label" aria-invalid={Boolean(error)}
            onValueChange={(values) => {
              const value = values[0];
              if (value === "slip2go" || value === "slipok") { setSelected(value); setError(""); }
            }}>
            <ToggleGroupItem value="slip2go" disabled={!configured.slip2go}
            className="aria-pressed:border-primary aria-pressed:ring-1 aria-pressed:ring-primary">Slip2Go</ToggleGroupItem>
            <ToggleGroupItem value="slipok" disabled={!configured.slipok}
            className="aria-pressed:border-primary aria-pressed:ring-1 aria-pressed:ring-primary">SlipOK</ToggleGroupItem>
          </ToggleGroup>
        </Field>
        {error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
      </FieldGroup>
      <DialogFooter>
        <Button type="button" variant="outline" disabled={pending} onClick={() => setOpen(false)}>ยกเลิก</Button>
        <Button type="button" disabled={pending || selected === provider || !configured[selected]} onClick={save}>
          {pending ? "กำลังบันทึก…" : "บันทึก"}
        </Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>;
}