"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { setCommissionAvailability } from "@/app/admin/commission/actions";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Textarea } from "@/components/ui/textarea";

export function AdminCommissionAvailabilityControl({ isOpen, closureMessage }: {
  isOpen: boolean; closureMessage: string;
}) {
  const router = useRouter();
  const [message, setMessage] = useState(closureMessage);
  const [pending, startTransition] = useTransition();
  const [error, setError] = useState("");

  function save(nextOpen: boolean) {
    setError("");
    startTransition(async () => {
      const result = await setCommissionAvailability(nextOpen, message);
      if (result.status === "error") {
        setError(result.message);
        return;
      }
      toast.success(nextOpen ? "เปิดรับ Commission แล้ว" : "ปิดรับ Commission แล้ว");
      router.refresh();
    });
  }

  return <Card><CardHeader>
    <CardTitle>การรับ Commission</CardTitle>
    <CardDescription>การปิดรับจะหยุดคำขอใหม่ ลูกค้าที่มีคำขออยู่แล้วชำระเงินต่อได้ ทุก Ticket ยังคงคุยได้ตามปกติ</CardDescription>
  </CardHeader><CardContent className="flex flex-col gap-3">
    <label htmlFor="commission-closure-message" className="text-sm font-medium">ข้อความเมื่อปิดรับ</label>
    <Textarea id="commission-closure-message" value={message} maxLength={1000}
      onChange={(event) => setMessage(event.target.value)} disabled={pending}
      placeholder="แจ้งเหตุผลที่ปิดรับและข้อมูลที่ลูกค้าควรทราบ" />
    <div className="flex flex-wrap gap-2">
      <Button type="button" disabled={pending || !message.trim()} onClick={() => save(false)}>
        {isOpen ? "ปิดรับ Commission" : "บันทึกข้อความ"}
      </Button>
      {!isOpen && <Button type="button" variant="outline" disabled={pending} onClick={() => save(true)}>
        เปิดรับ Commission
      </Button>}
    </div>
    {error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
  </CardContent></Card>;
}