"use client";
import React, { useState } from "react";
import { PageHeader } from "@/components/page-header";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";
import { ResponsiveModal } from "@/components/ui/responsive-modal";
import { Search, Edit, Trash, Plus, Truck } from "lucide-react";
import { createSupplier, updateSupplier, deleteSupplier } from "@/app/actions/supplier";

export default function SuppliersClient({ initialSuppliers }: { initialSuppliers: any[] }) {
  const [suppliers, setSuppliers] = useState(initialSuppliers);
  const [searchQuery, setSearchQuery] = useState("");
  
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [formData, setFormData] = useState({ name: "", phone: "" });
  const [isSubmitting, setIsSubmitting] = useState(false);

  const filteredSuppliers = suppliers.filter(
    (s) => s.name.includes(searchQuery) || (s.phone && s.phone.includes(searchQuery))
  );

  const handleOpenNew = () => {
    setEditingId(null);
    setFormData({ name: "", phone: "" });
    setIsModalOpen(true);
  };

  const handleOpenEdit = (s: any) => {
    setEditingId(s.id);
    setFormData({ name: s.name, phone: s.phone || "" });
    setIsModalOpen(true);
  };

  const handleDelete = async (id: string) => {
    if (!confirm("آیا از حذف این تامین‌کننده مطمئن هستید؟")) return;
    const res = await deleteSupplier(id);
    if (res.success) {
      toast.success("تامین‌کننده حذف شد");
      setSuppliers(suppliers.filter((s) => s.id !== id));
    } else {
      toast.error(res.error || "خطا در حذف تامین‌کننده");
    }
  };

  const handleSubmit = async () => {
    if (!formData.name) {
      toast.error("نام تامین‌کننده الزامی است");
      return;
    }
    setIsSubmitting(true);
    let res;
    if (editingId) {
      res = await updateSupplier(editingId, formData);
    } else {
      res = await createSupplier(formData);
    }
    setIsSubmitting(false);

    if (res.success && res.supplier) {
      toast.success(editingId ? "ویرایش با موفقیت انجام شد" : "تامین‌کننده جدید ثبت شد");
      if (editingId) {
        setSuppliers(suppliers.map(s => s.id === editingId ? res.supplier : s));
      } else {
        setSuppliers([res.supplier, ...suppliers]);
      }
      setIsModalOpen(false);
    } else {
      toast.error(res.error || "خطا در ذخیره اطلاعات");
    }
  };

  return (
    <div className="flex flex-col h-full bg-muted/20">
      <PageHeader 
        title="مدیریت تامین‌کنندگان" 
        actions={[
          { label: "تامین‌کننده جدید", icon: <Plus className="w-4 h-4" />, onClick: handleOpenNew, variant: "default" }
        ]}
      />

      <div className="p-4 md:p-6 lg:p-8 space-y-6 max-w-7xl mx-auto w-full">
        {/* Search Bar */}
        <div className="bg-card border rounded-2xl shadow-sm p-4 flex flex-col sm:flex-row gap-4 items-center justify-between">
          <div className="relative w-full sm:max-w-md">
            <Search className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
            <Input 
              placeholder="جستجو در تامین‌کنندگان..." 
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pr-10"
            />
          </div>
        </div>

        {/* Grid */}
        {filteredSuppliers.length === 0 ? (
          <div className="text-center p-12 bg-card border rounded-2xl border-dashed">
            <Truck className="w-12 h-12 text-muted-foreground/30 mx-auto mb-4" />
            <p className="text-muted-foreground">هیچ تامین‌کننده‌ای یافت نشد.</p>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
            {filteredSuppliers.map((sup) => (
              <div key={sup.id} className="bg-card border rounded-2xl shadow-sm p-5 hover:border-indigo-500/30 transition-all flex flex-col">
                <div className="flex items-start justify-between mb-4">
                  <div className="flex-1">
                    <h3 className="font-bold text-lg">{sup.name}</h3>
                    <p className="text-sm text-muted-foreground font-sans mt-1">{sup.phone || "بدون شماره"}</p>
                  </div>
                  <div className="w-10 h-10 rounded-full bg-indigo-500/10 flex items-center justify-center text-indigo-500 shrink-0">
                    <Truck className="w-5 h-5" />
                  </div>
                </div>
                
                <div className="flex items-center justify-between mt-auto pt-4 border-t">
                  <div className="text-sm font-medium">
                    تراز: <span className="font-sans" dir="ltr">{sup.balance.toLocaleString()}</span> تومان
                  </div>
                  <div className="flex gap-2">
                    <Button variant="ghost" size="icon" onClick={() => handleOpenEdit(sup)} className="h-8 w-8 text-blue-500 hover:bg-blue-500/10 hover:text-blue-600">
                      <Edit className="w-4 h-4" />
                    </Button>
                    <Button variant="ghost" size="icon" onClick={() => handleDelete(sup.id)} className="h-8 w-8 text-rose-500 hover:bg-rose-500/10 hover:text-rose-600">
                      <Trash className="w-4 h-4" />
                    </Button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      <ResponsiveModal
        open={isModalOpen}
        onOpenChange={setIsModalOpen}
        title={editingId ? "ویرایش تامین‌کننده" : "تامین‌کننده جدید"}
      >
        <div className="space-y-4 p-4">
          <div className="space-y-2">
            <Label>نام تامین‌کننده</Label>
            <Input 
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              placeholder="مثلا: شرکت پخش رازی"
            />
          </div>
          <div className="space-y-2">
            <Label>شماره تماس</Label>
            <Input 
              value={formData.phone}
              onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
              placeholder="0912..."
              dir="ltr"
              className="text-right"
            />
          </div>
          <div className="pt-4">
            <Button onClick={handleSubmit} disabled={isSubmitting} className="w-full">
              {isSubmitting ? "در حال ثبت..." : "ذخیره تغییرات"}
            </Button>
          </div>
        </div>
      </ResponsiveModal>
    </div>
  );
}