"use client";

import { useState } from "react";
import { PageHeader } from "@/components/page-header";
import { ResponsiveActions } from "@/components/ui/responsive-actions";
import { PlusIcon, SaveIcon, TruckIcon, EditIcon, Trash2Icon, Image as ImageIcon } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { toast } from "sonner";
import { createShippingMethod, updateShippingMethod, deleteShippingMethod } from "@/app/actions/shipping";
import { Badge } from "@/components/ui/badge";
import MediaManager from "@/components/media/media-manager";
import { ResponsiveModal } from "@/components/ui/responsive-modal";

export default function ShippingClient({ initialMethods }: { initialMethods: any[] }) {
  const [methods, setMethods] = useState(initialMethods);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [isMediaOpen, setIsMediaOpen] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [formData, setFormData] = useState<any>({
    id: null,
    name: "",
    description: "",
    baseCost: 0,
    baseCostCity: "",
    baseCostProvince: "",
    costPerKg: 0,
    extraCostPerItem: 0,
    freeShippingThreshold: "",
    iconMediaId: "",
    iconMedia: null,
    isPayOnDelivery: false,
    isActive: true,
    sortOrder: 0
  });

  const openNew = () => {
    setFormData({ id: null, name: "", description: "", baseCost: 0, baseCostCity: "", baseCostProvince: "", costPerKg: 0, extraCostPerItem: 0, freeShippingThreshold: "", iconMediaId: "", iconMedia: null, isPayOnDelivery: false, isActive: true, sortOrder: 0 });
    setIsDialogOpen(true);
  };

  const openEdit = (m: any) => {
    setFormData({ ...m });
    setIsDialogOpen(true);
  };

  const handleSave = async () => {
    if (!formData.name) {
      toast.error("لطفا عنوان روش ارسال را وارد کنید");
      return;
    }
    setIsSaving(true);
    const action = formData.id ? updateShippingMethod(formData.id, formData) : createShippingMethod(formData);
    const res = await action;
    setIsSaving(false);
    if (res.success) {
      toast.success("روش ارسال ذخیره شد");
      if (formData.id) {
        setMethods(methods.map(m => m.id === formData.id ? res.method : m));
      } else {
        setMethods([...methods, res.method]);
      }
      setIsDialogOpen(false);
    } else {
      toast.error(res.error);
    }
  };

  const handleDelete = async (id: string) => {
    if (!confirm("آیا از حذف این روش ارسال مطمئن هستید؟")) return;
    const res = await deleteShippingMethod(id);
    if (res.success) {
      toast.success("روش ارسال حذف شد");
      setMethods(methods.filter(m => m.id !== id));
    } else {
      toast.error(res.error);
    }
  };

  return (
    <div className="flex flex-col h-full bg-background text-foreground overflow-y-auto">
      <PageHeader
        title="مدیریت پیک و روش‌های ارسال"
        subtitle="تعریف روش‌های پستی، تیپاکس، پیک موتوری و پس‌کرایه"
        icon={<TruckIcon className="w-5 h-5" />}
      >
        <ResponsiveActions actions={[
          { label: "روش جدید", icon: <PlusIcon className="w-4 h-4" />, onClick: openNew, className: "bg-indigo-600 hover:bg-indigo-700 text-white" }
        ]} />
      </PageHeader>

      <main className="flex-1 p-4 md:p-6 lg:p-8">
        <div className="max-w-5xl mx-auto space-y-4">
          {methods.length === 0 ? (
            <div className="flex flex-col items-center justify-center p-12 bg-white dark:bg-zinc-900 border rounded-2xl shadow-sm text-center">
              <TruckIcon className="w-16 h-16 text-muted-foreground mb-4 opacity-50" />
              <h3 className="font-bold text-lg">هنوز روش ارسالی تعریف نشده است</h3>
              <p className="text-muted-foreground mt-2 max-w-sm">برای شروع سفارش‌گیری، حداقل یک روش ارسال (مثلاً پیک موتوری یا پست) تعریف کنید.</p>
              <Button onClick={openNew} className="mt-6 bg-indigo-600 text-white"><PlusIcon className="w-4 h-4 ml-2" /> افزودن روش ارسال</Button>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {methods.map(method => (
                <Card key={method.id} className={`rounded-xl border ${!method.isActive && 'opacity-60'}`}>
                  <CardContent className="p-5 flex flex-col gap-4">
                    <div className="flex justify-between items-start">
                      <div>
                        <h3 className="font-bold text-lg flex items-center gap-2">
                          {method.iconMedia ? (
                            <img src={method.iconMedia.url} alt={method.name} className="w-6 h-6 object-contain rounded" />
                          ) : (
                            <TruckIcon className="w-5 h-5 text-indigo-500" />
                          )}
                          {method.name}
                          {!method.isActive && <Badge variant="destructive" className="text-[10px]">غیرفعال</Badge>}
                        </h3>
                        {method.description && <p className="text-xs text-muted-foreground mt-1 line-clamp-2">{method.description}</p>}
                      </div>
                      <div className="flex gap-1">
                        <Button variant="ghost" size="icon" onClick={() => openEdit(method)}><EditIcon className="w-4 h-4 text-indigo-500" /></Button>
                        <Button variant="ghost" size="icon" onClick={() => handleDelete(method.id)}><Trash2Icon className="w-4 h-4 text-rose-500" /></Button>
                      </div>
                    </div>
                    
                    <div className="bg-muted/30 rounded-lg p-3 text-sm space-y-2 border">
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">نوع هزینه:</span>
                        <span className="font-medium">{method.isPayOnDelivery ? 'پس‌کرایه (پرداخت در محل)' : 'پرداخت آنلاین / ثابت'}</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-muted-foreground">هزینه پایه:</span>
                        {method.isPayOnDelivery ? (
                          <span className="text-emerald-600 font-bold bg-emerald-50 dark:bg-emerald-950/30 px-2 py-0.5 rounded text-xs">رایگان در سایت</span>
                        ) : (
                          <span className="font-bold font-sans tracking-tight">
                            {Number(method.baseCost).toLocaleString("fa-IR")} <span className="text-xs font-normal">تومان</span>
                          </span>
                        )}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </div>
      </main>

      <ResponsiveModal open={isDialogOpen} onOpenChange={setIsDialogOpen} title={formData.id ? "ویرایش روش ارسال" : "افزودن روش ارسال جدید"}>
        <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label>نام روش ارسال (مثلا: پست پیشتاز، تیپاکس)</Label>
              <Input value={formData.name} onChange={e => setFormData({ ...formData, name: e.target.value })} autoFocus />
            </div>
            
            <div className="space-y-2">
              <Label>توضیحات کوتاه (نمایش به مشتری)</Label>
              <Input value={formData.description || ""} onChange={e => setFormData({ ...formData, description: e.target.value })} placeholder="مثلا: تحویل بین ۳ تا ۵ روز کاری" />
            </div>

            <div className="space-y-2">
              <Label>آیکون روش ارسال (اختیاری)</Label>
              <div className="flex items-center gap-3">
                <MediaManager 
                  mode="single" 
                  title="انتخاب آیکون روش ارسال" 
                  value={formData.iconMedia ? { url: formData.iconMedia.url, id: formData.iconMedia.id } : null}
                  open={isMediaOpen}
                  onOpenChange={setIsMediaOpen}
                  trigger={<Button type="button" variant="outline" className="flex-1 justify-start text-muted-foreground"><ImageIcon className="w-4 h-4 ml-2 shrink-0" /> انتخاب آیکون از رسانه...</Button>}
                  onChange={(m: any) => { setFormData((p: any) => ({ ...p, iconMediaId: m?.id || "", iconMedia: m })); setIsMediaOpen(false); }}
                />
                {formData.iconMedia?.url && <img src={formData.iconMedia.url} alt="icon" className="w-10 h-10 object-contain rounded border" />}
                {formData.iconMedia && (
                  <Button type="button" variant="ghost" size="icon" onClick={() => setFormData((p: any) => ({ ...p, iconMediaId: null, iconMedia: null }))}>
                    <Trash2Icon className="w-4 h-4 text-rose-500" />
                  </Button>
                )}
              </div>
            </div>

            <div className="bg-muted/30 p-4 rounded-xl border space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <Label>هزینه به صورت پس‌کرایه</Label>
                  <p className="text-xs text-muted-foreground mt-1">هزینه ارسال در محل توسط مشتری پرداخت می‌شود (مثل تیپاکس).</p>
                </div>
                <Switch checked={formData.isPayOnDelivery} onCheckedChange={c => setFormData({ ...formData, isPayOnDelivery: c, baseCost: c ? 0 : formData.baseCost })} />
              </div>

              {!formData.isPayOnDelivery && (
                <div className="space-y-4 pt-4 border-t">
                  <div className="bg-muted/10 p-3 rounded-lg border border-dashed space-y-3">
                    <Label className="text-indigo-600 dark:text-indigo-400 font-bold flex items-center gap-2">
                      <TruckIcon className="w-4 h-4"/> هزینه‌های ارسال بر اساس مسافت (تومان)
                    </Label>
                    <p className="text-[10px] text-muted-foreground">اگر می‌خواهید هزینه ثابت باشد فقط فیلد "سراسر کشور" را پر کنید. مقادیر خالی به معنای استفاده از قیمت پایه سراسری است.</p>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-2">
                      <div className="space-y-2">
                        <Label>درون شهری (همشهری)</Label>
                        <Input type="number" dir="ltr" value={formData.baseCostCity || ""} onChange={e => setFormData({ ...formData, baseCostCity: e.target.value })} placeholder="مثلا: 15000" />
                      </div>
                      <div className="space-y-2">
                        <Label>درون استانی (هم‌استانی)</Label>
                        <Input type="number" dir="ltr" value={formData.baseCostProvince || ""} onChange={e => setFormData({ ...formData, baseCostProvince: e.target.value })} placeholder="مثلا: 25000" />
                      </div>
                      <div className="space-y-2">
                        <Label>سراسر کشور (پایه)</Label>
                        <Input type="number" dir="ltr" value={formData.baseCost} onChange={e => setFormData({ ...formData, baseCost: e.target.value })} />
                      </div>
                    </div>
                  </div>
                  
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label>هزینه هر کیلو مازاد (تومان)</Label>
                      <Input type="number" dir="ltr" value={formData.costPerKg} onChange={e => setFormData({ ...formData, costPerKg: e.target.value })} />
                    </div>
                    <div className="space-y-2">
                      <Label>هزینه بسته‌بندی/کارتن هر قلم</Label>
                      <Input type="number" dir="ltr" value={formData.extraCostPerItem} onChange={e => setFormData({ ...formData, extraCostPerItem: e.target.value })} />
                    </div>
                  </div>
                  
                  <div className="space-y-2">
                    <Label>ارسال رایگان برای سفارشات بالاتر از (تومان)</Label>
                    <Input type="number" dir="ltr" value={formData.freeShippingThreshold || ""} onChange={e => setFormData({ ...formData, freeShippingThreshold: e.target.value })} placeholder="خالی = بدون ارسال رایگان" />
                  </div>
                </div>
              )}
            </div>

            <div className="flex items-center justify-between">
              <Label>وضعیت فعال بودن</Label>
              <Switch checked={formData.isActive} onCheckedChange={c => setFormData({ ...formData, isActive: c })} />
            </div>
            
            <div className="space-y-2">
              <Label>ترتیب نمایش (اولویت)</Label>
              <Input type="number" dir="ltr" value={formData.sortOrder} onChange={e => setFormData({ ...formData, sortOrder: e.target.value })} />
            </div>
          </div>
          <div className="flex gap-3 pt-4 border-t mt-4">
            <Button variant="outline" className="flex-1" onClick={() => setIsDialogOpen(false)}>انصراف</Button>
            <Button onClick={handleSave} disabled={isSaving} className="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white">
              {isSaving ? "در حال ذخیره..." : "ذخیره تغییرات"}
            </Button>
          </div>
      </ResponsiveModal>
    </div>
  );
}