/**
 * 廠商新增/編輯表單對話框
 */

import { useEffect, useState } from "react";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "../ui/dialog";
import type { Supplier, SupplierFormData } from "../../types/vendor";

interface VendorFormDialogProps {
  open: boolean;
  supplier: Supplier | null;
  onClose: () => void;
  onSave: (data: SupplierFormData) => void;
}

const initialFormData: SupplierFormData = {
  name: "",
  contact: "",
  phone: "",
  email: "",
};

export default function VendorFormDialog({
  open,
  supplier,
  onClose,
  onSave,
}: VendorFormDialogProps) {
  const [formData, setFormData] = useState<SupplierFormData>(initialFormData);
  const isEditing = !!supplier;

  useEffect(() => {
    if (supplier) {
      setFormData({
        name: supplier.name,
        contact: supplier.contact || "",
        phone: supplier.phone || "",
        email: supplier.email || "",
      });
    } else {
      setFormData(initialFormData);
    }
  }, [supplier, open]);

  const handleSave = () => {
    onSave(formData);
    setFormData(initialFormData);
  };

  const handleCancel = () => {
    onClose();
    setFormData(initialFormData);
  };

  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>{isEditing ? "編輯廠商" : "新增廠商"}</DialogTitle>
          <DialogDescription>
            {isEditing ? "編輯供應商的詳細資料。" : "新增供應商的詳細資料。"}
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-6">
          <div>
            <h3 className="mb-4">基本資料</h3>
            <div className="space-y-4">
              <div>
                <Label className="text-muted-foreground text-xs">廠商名稱</Label>
                <Input
                  placeholder="輸入廠商名稱"
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  className="mt-1"
                />
              </div>
              <div>
                <Label className="text-muted-foreground text-xs">聯絡人</Label>
                <Input
                  placeholder="輸入聯絡人姓名"
                  value={formData.contact}
                  onChange={(e) => setFormData({ ...formData, contact: e.target.value })}
                  className="mt-1"
                />
              </div>
              <div>
                <Label className="text-muted-foreground text-xs">聯絡電話</Label>
                <Input
                  placeholder="例：02-1234-5678"
                  value={formData.phone}
                  onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                  className="mt-1"
                />
              </div>
              <div>
                <Label className="text-muted-foreground text-xs">Email</Label>
                <Input
                  type="email"
                  placeholder="例：vendor@example.com"
                  value={formData.email}
                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  className="mt-1"
                />
              </div>
            </div>
          </div>
        </div>

        <DialogFooter>
          <Button
            variant="outline"
            size="sm"
            onClick={handleCancel}
            className="gap-2 button-outlined-primary"
          >
            取消
          </Button>
          <Button
            size="sm"
            onClick={handleSave}
            className="gap-2 button-filled-primary"
          >
            儲存
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
