import { createFileRoute } from "@tanstack/react-router";
import { PageLayout } from "@/components/PageLayout";
import { useEffect, useMemo, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
import { useLanguage } from "@/hooks/use-language";
import { usePermissions } from "@/hooks/use-permissions";
import { useAuth } from "@/hooks/use-auth";
import { toast } from "sonner";
import {
  Plus, Edit, Trash2, X, Search, ShieldAlert, Tag, Eye,
  ShoppingCart, Briefcase, Percent, TrendingUp, PlusCircle,
  Users, Zap, Truck, Building2, Megaphone, Wrench, MinusCircle,
  Banknote, CreditCard, Wallet, Receipt, Gift, Coins, Package,
  Phone, Wifi, Home, Car, Coffee, Heart, Star, Award,
  TrendingDown,
} from "lucide-react";

export const Route = createFileRoute("/_authenticated/transaction-categories")({
  head: () => ({ meta: [{ title: "Transaction Categories — Niyamah ERP" }] }),
  component: TransactionCategoriesPage,
});

const ICON_MAP: Record<string, any> = {
  Tag, ShoppingCart, Briefcase, Percent, TrendingUp, TrendingDown, PlusCircle,
  Users, Zap, Truck, Building2, Megaphone, Wrench, MinusCircle,
  Banknote, CreditCard, Wallet, Receipt, Gift, Coins, Package,
  Phone, Wifi, Home, Car, Coffee, Heart, Star, Award,
};
const ICON_NAMES = Object.keys(ICON_MAP);
const COLOR_PRESETS = [
  "#10b981", "#0ea5e9", "#f59e0b", "#8b5cf6", "#14b8a6",
  "#ef4444", "#f97316", "#06b6d4", "#a855f7", "#ec4899",
  "#64748b", "#dc2626", "#6366f1", "#eab308", "#22c55e",
];

type Cat = {
  id: string; name: string; name_bn: string; type: "income" | "expense";
  description: string; icon: string; color: string; status: string;
  is_default: boolean; created_at: string;
};

const emptyForm = {
  name: "", name_bn: "", type: "expense" as "income" | "expense",
  description: "", icon: "Tag", color: "#6366f1", status: "active",
};

function TransactionCategoriesPage() {
  const { lang } = useLanguage();
  const { isAdmin } = usePermissions();
  const { user } = useAuth();
  const [rows, setRows] = useState<Cat[]>([]);
  const [usage, setUsage] = useState<Record<string, number>>({});
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [typeFilter, setTypeFilter] = useState<"all" | "income" | "expense">("all");
  const [statusFilter, setStatusFilter] = useState<"all" | "active" | "inactive">("all");
  const [open, setOpen] = useState(false);
  const [edit, setEdit] = useState<Cat | null>(null);
  const [viewCat, setViewCat] = useState<Cat | null>(null);
  const [form, setForm] = useState({ ...emptyForm });
  const [saving, setSaving] = useState(false);

  const fetchData = async () => {
    setLoading(true);
    const [{ data: cats }, { data: incUse }, { data: expUse }] = await Promise.all([
      supabase.from("transaction_categories").select("*").is("deleted_at", null).order("type").order("name"),
      supabase.from("incomes").select("category_id").not("category_id", "is", null),
      supabase.from("expenses").select("category_id").not("category_id", "is", null),
    ]);
    const u: Record<string, number> = {};
    [...(incUse || []), ...(expUse || [])].forEach((r: any) => {
      if (r.category_id) u[r.category_id] = (u[r.category_id] || 0) + 1;
    });
    setUsage(u);
    setRows((cats as Cat[]) || []);
    setLoading(false);
  };
  useEffect(() => { fetchData(); }, []);

  const filtered = useMemo(() => {
    const s = search.toLowerCase().trim();
    return rows.filter((r) => {
      if (typeFilter !== "all" && r.type !== typeFilter) return false;
      if (statusFilter !== "all" && r.status !== statusFilter) return false;
      if (s && !r.name.toLowerCase().includes(s) && !r.name_bn.includes(search)) return false;
      return true;
    });
  }, [rows, search, typeFilter, statusFilter]);

  const totals = useMemo(() => ({
    income: rows.filter((r) => r.type === "income").length,
    expense: rows.filter((r) => r.type === "expense").length,
    active: rows.filter((r) => r.status === "active").length,
  }), [rows]);

  const openAdd = () => { setEdit(null); setForm({ ...emptyForm }); setOpen(true); };
  const openEdit = (r: Cat) => {
    setEdit(r);
    setForm({
      name: r.name, name_bn: r.name_bn, type: r.type,
      description: r.description, icon: r.icon || "Tag",
      color: r.color || "#6366f1", status: r.status,
    });
    setOpen(true);
  };
  const openView = (r: Cat) => { setViewCat(r); };

  const del = async (r: Cat) => {
    if (r.is_default) { toast.error(lang === "bn" ? "ডিফল্ট ক্যাটাগরি মুছা যাবে না" : "Default category cannot be deleted"); return; }
    const inUse = usage[r.id] || 0;
    if (inUse > 0) {
      if (!confirm(lang === "bn"
        ? `সতর্কতা: এই ক্যাটাগরি ${inUse} টি লেনদেনে ব্যবহৃত হচ্ছে। তবুও মুছবেন?`
        : `Warning: this category is used in ${inUse} transactions. Delete anyway?`)) return;
    } else {
      if (!confirm(lang === "bn" ? `"${r.name}" মুছবেন?` : `Delete "${r.name}"?`)) return;
    }
    const { error } = await supabase.from("transaction_categories").delete().eq("id", r.id);
    if (error) { toast.error(error.message); return; }
    toast.success(lang === "bn" ? "মুছে ফেলা হয়েছে" : "Deleted");
    fetchData();
  };

  const save = async () => {
    if (!form.name.trim()) { toast.error(lang === "bn" ? "নাম লিখুন" : "Name required"); return; }
    setSaving(true);
    const payload = {
      name: form.name.trim(),
      name_bn: form.name_bn.trim(),
      type: form.type,
      description: form.description.trim(),
      icon: form.icon,
      color: form.color,
      status: form.status,
      ...(edit ? {} : { created_by: user?.id }),
    };
    const { error } = edit
      ? await supabase.from("transaction_categories").update(payload).eq("id", edit.id)
      : await supabase.from("transaction_categories").insert(payload);
    setSaving(false);
    if (error) { toast.error(error.message); return; }
    toast.success(edit ? (lang === "bn" ? "আপডেট হয়েছে" : "Updated") : (lang === "bn" ? "যোগ হয়েছে" : "Added"));
    setOpen(false);
    fetchData();
  };

  if (!isAdmin) {
    return (
      <PageLayout>
        <div className="flex h-[60vh] flex-col items-center justify-center text-center">
          <ShieldAlert className="mb-3 h-12 w-12 text-destructive" />
          <h2 className="text-xl font-bold">{lang === "bn" ? "অ্যাক্সেস নেই" : "Access denied"}</h2>
          <p className="text-sm text-muted-foreground">{lang === "bn" ? "শুধুমাত্র অ্যাডমিন এই পেজ দেখতে পারবেন" : "Admin only"}</p>
        </div>
      </PageLayout>
    );
  }

  const inputCls = "w-full rounded-lg border border-input bg-card px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring";

  return (
    <PageLayout>
      <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
        <div>
          <h1 className="text-xl font-bold text-foreground">{lang === "bn" ? "আয়/ব্যয় ক্যাটাগরি" : "Income / Expense Categories"}</h1>
          <p className="text-sm text-muted-foreground">
            {lang === "bn" ? "আয় ও ব্যয়ের ক্যাটাগরি ম্যানেজ করুন" : "Manage transaction categories"} · {rows.length} {lang === "bn" ? "টি" : "total"}
          </p>
        </div>
        <button onClick={openAdd} className="flex items-center gap-2 rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90">
          <Plus className="h-4 w-4" /> {lang === "bn" ? "নতুন ক্যাটাগরি" : "Add Category"}
        </button>
      </div>

      <div className="mb-4 grid gap-3 grid-cols-2 md:grid-cols-3">
        <div className="rounded-xl border border-border bg-card p-4">
          <div className="flex items-center justify-between">
            <div><p className="text-xs text-muted-foreground">{lang === "bn" ? "আয় ক্যাটাগরি" : "Income Categories"}</p><p className="mt-1 text-lg font-bold">{totals.income}</p></div>
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"><TrendingUp className="h-5 w-5" /></div>
          </div>
        </div>
        <div className="rounded-xl border border-border bg-card p-4">
          <div className="flex items-center justify-between">
            <div><p className="text-xs text-muted-foreground">{lang === "bn" ? "ব্যয় ক্যাটাগরি" : "Expense Categories"}</p><p className="mt-1 text-lg font-bold">{totals.expense}</p></div>
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400"><TrendingDown className="h-5 w-5" /></div>
          </div>
        </div>
        <div className="rounded-xl border border-border bg-card p-4 col-span-2 md:col-span-1">
          <div className="flex items-center justify-between">
            <div><p className="text-xs text-muted-foreground">{lang === "bn" ? "সক্রিয়" : "Active"}</p><p className="mt-1 text-lg font-bold">{totals.active}</p></div>
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary"><Tag className="h-5 w-5" /></div>
          </div>
        </div>
      </div>

      <div className="mb-4 flex flex-wrap items-center gap-3">
        <div className="relative flex-1 min-w-[180px] max-w-sm">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder={lang === "bn" ? "ক্যাটাগরি খুঁজুন..." : "Search categories..."} className="w-full rounded-lg border border-input bg-card py-2 pl-10 pr-4 text-sm outline-none focus:ring-2 focus:ring-ring" />
        </div>
        <select value={typeFilter} onChange={(e) => setTypeFilter(e.target.value as any)} className="rounded-lg border border-input bg-card px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring">
          <option value="all">{lang === "bn" ? "সব ধরনের" : "All Types"}</option>
          <option value="income">{lang === "bn" ? "আয়" : "Income"}</option>
          <option value="expense">{lang === "bn" ? "ব্যয়" : "Expense"}</option>
        </select>
        <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value as any)} className="rounded-lg border border-input bg-card px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring">
          <option value="all">{lang === "bn" ? "সব স্ট্যাটাস" : "All Status"}</option>
          <option value="active">{lang === "bn" ? "সক্রিয়" : "Active"}</option>
          <option value="inactive">{lang === "bn" ? "নিষ্ক্রিয়" : "Inactive"}</option>
        </select>
      </div>

      {loading ? (
        <div className="flex h-40 items-center justify-center text-muted-foreground">{lang === "bn" ? "লোড হচ্ছে..." : "Loading..."}</div>
      ) : (
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {filtered.map((r) => {
            const Icon = ICON_MAP[r.icon] || Tag;
            const used = usage[r.id] || 0;
            return (
              <div key={r.id} className="rounded-xl border border-border bg-card p-4">
                <div className="flex items-start gap-3">
                  <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg" style={{ background: `${r.color}22`, color: r.color }}>
                    <Icon className="h-5 w-5" />
                  </div>
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-2">
                      <p className="truncate font-semibold text-foreground">{lang === "bn" ? (r.name_bn || r.name) : r.name}</p>
                      {r.is_default && <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">{lang === "bn" ? "ডিফল্ট" : "Default"}</span>}
                    </div>
                    <p className="truncate text-xs text-muted-foreground">{lang === "bn" ? r.name : r.name_bn}</p>
                    <div className="mt-2 flex flex-wrap items-center gap-1.5">
                      <span className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium ${r.type === "income" ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400" : "bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400"}`}>
                        {r.type === "income" ? <TrendingUp className="h-3 w-3" /> : <TrendingDown className="h-3 w-3" />}
                        {r.type === "income" ? (lang === "bn" ? "আয়" : "Income") : (lang === "bn" ? "ব্যয়" : "Expense")}
                      </span>
                      <span className={`rounded-full px-2 py-0.5 text-[10px] font-medium ${r.status === "active" ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400" : "bg-zinc-200 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-400"}`}>
                        {r.status === "active" ? (lang === "bn" ? "সক্রিয়" : "Active") : (lang === "bn" ? "নিষ্ক্রিয়" : "Inactive")}
                      </span>
                      <span className="rounded-full bg-secondary px-2 py-0.5 text-[10px] font-medium text-secondary-foreground">{used} {lang === "bn" ? "ব্যবহার" : "used"}</span>
                    </div>
                  </div>
                </div>
                {r.description && <p className="mt-3 line-clamp-2 text-xs text-muted-foreground">{r.description}</p>}
                <div className="mt-3 flex justify-end gap-1 border-t border-border/50 pt-2">
                  <button onClick={() => openView(r)} className="rounded p-1.5 text-muted-foreground hover:bg-secondary hover:text-foreground" title={lang === "bn" ? "দেখুন" : "View"}><Eye className="h-3.5 w-3.5" /></button>
                  <button onClick={() => openEdit(r)} className="rounded p-1.5 text-muted-foreground hover:bg-secondary hover:text-foreground" title={lang === "bn" ? "এডিট" : "Edit"}><Edit className="h-3.5 w-3.5" /></button>
                  <button onClick={() => del(r)} disabled={r.is_default} className="rounded p-1.5 text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:cursor-not-allowed disabled:opacity-30" title={lang === "bn" ? "মুছুন" : "Delete"}><Trash2 className="h-3.5 w-3.5" /></button>
                </div>
              </div>
            );
          })}
          {filtered.length === 0 && (
            <div className="col-span-full flex h-32 items-center justify-center rounded-xl border border-border bg-card text-muted-foreground">
              <Tag className="mr-2 h-4 w-4" />{lang === "bn" ? "কোনো ক্যাটাগরি নেই" : "No categories"}
            </div>
          )}
        </div>
      )}

      {open && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={() => setOpen(false)}>
          <div className="w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-xl bg-card p-6 shadow-lg" onClick={(e) => e.stopPropagation()}>
            <div className="mb-4 flex items-center justify-between">
              <h2 className="text-lg font-bold">{edit ? (lang === "bn" ? "ক্যাটাগরি এডিট" : "Edit Category") : (lang === "bn" ? "নতুন ক্যাটাগরি" : "Add Category")}</h2>
              <button onClick={() => setOpen(false)} className="rounded p-1 hover:bg-muted"><X className="h-4 w-4" /></button>
            </div>
            <div className="grid gap-3 md:grid-cols-2">
              <div>
                <label className="mb-1 block text-sm font-medium">{lang === "bn" ? "ধরন" : "Type"} *</label>
                <select disabled={!!edit?.is_default} className={inputCls} value={form.type} onChange={(e) => setForm({ ...form, type: e.target.value as any })}>
                  <option value="income">{lang === "bn" ? "আয়" : "Income"}</option>
                  <option value="expense">{lang === "bn" ? "ব্যয়" : "Expense"}</option>
                </select>
              </div>
              <div>
                <label className="mb-1 block text-sm font-medium">{lang === "bn" ? "স্ট্যাটাস" : "Status"}</label>
                <select className={inputCls} value={form.status} onChange={(e) => setForm({ ...form, status: e.target.value })}>
                  <option value="active">{lang === "bn" ? "সক্রিয়" : "Active"}</option>
                  <option value="inactive">{lang === "bn" ? "নিষ্ক্রিয়" : "Inactive"}</option>
                </select>
              </div>
              <div>
                <label className="mb-1 block text-sm font-medium">{lang === "bn" ? "নাম (EN)" : "Name (EN)"} *</label>
                <input className={inputCls} value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="e.g. Office Rent" />
              </div>
              <div>
                <label className="mb-1 block text-sm font-medium">{lang === "bn" ? "নাম (BN)" : "Name (BN)"}</label>
                <input className={inputCls} value={form.name_bn} onChange={(e) => setForm({ ...form, name_bn: e.target.value })} placeholder="যেমন: অফিস ভাড়া" />
              </div>
              <div className="md:col-span-2">
                <label className="mb-1 block text-sm font-medium">{lang === "bn" ? "বর্ণনা" : "Description"}</label>
                <textarea rows={2} className={inputCls} value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} />
              </div>
              <div className="md:col-span-2">
                <label className="mb-2 block text-sm font-medium">{lang === "bn" ? "কালার" : "Color"}</label>
                <div className="flex flex-wrap items-center gap-2">
                  {COLOR_PRESETS.map((c) => (
                    <button key={c} type="button" onClick={() => setForm({ ...form, color: c })} className={`h-7 w-7 rounded-full border-2 ${form.color === c ? "border-foreground" : "border-transparent"}`} style={{ background: c }} />
                  ))}
                  <input type="color" value={form.color} onChange={(e) => setForm({ ...form, color: e.target.value })} className="h-7 w-10 cursor-pointer rounded border border-input" />
                </div>
              </div>
              <div className="md:col-span-2">
                <label className="mb-2 block text-sm font-medium">{lang === "bn" ? "আইকন" : "Icon"}</label>
                <div className="grid max-h-40 grid-cols-8 gap-1.5 overflow-y-auto rounded-lg border border-input bg-background p-2">
                  {ICON_NAMES.map((name) => {
                    const Ic = ICON_MAP[name];
                    const active = form.icon === name;
                    return (
                      <button key={name} type="button" onClick={() => setForm({ ...form, icon: name })} className={`flex h-9 w-9 items-center justify-center rounded-md border ${active ? "border-primary bg-primary/10" : "border-transparent hover:bg-muted"}`} title={name}>
                        <Ic className="h-4 w-4" style={{ color: active ? form.color : undefined }} />
                      </button>
                    );
                  })}
                </div>
              </div>
            </div>
            <div className="mt-5 flex justify-end gap-2">
              <button onClick={() => setOpen(false)} className="rounded-lg border border-border px-4 py-2 text-sm">{lang === "bn" ? "বাতিল" : "Cancel"}</button>
              <button onClick={save} disabled={saving} className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50">
                {saving ? "..." : (lang === "bn" ? "সংরক্ষণ" : "Save")}
              </button>
            </div>
          </div>
        </div>
      )}

      {viewCat && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={() => setViewCat(null)}>
          <div className="w-full max-w-lg rounded-xl bg-card p-6 shadow-lg" onClick={(e) => e.stopPropagation()}>
            <div className="mb-4 flex items-center justify-between">
              <h2 className="text-lg font-bold">{lang === "bn" ? "ক্যাটাগরি বিবরণ" : "Category Details"}</h2>
              <button onClick={() => setViewCat(null)} className="rounded p-1 hover:bg-muted"><X className="h-4 w-4" /></button>
            </div>
            <div className="flex items-center gap-4 mb-5">
              <div className="flex h-14 w-14 items-center justify-center rounded-xl" style={{ background: `${viewCat.color}22`, color: viewCat.color }}>
                {(ICON_MAP[viewCat.icon] || Tag)({ className: "h-6 w-6" })}
              </div>
              <div>
                <p className="text-base font-bold text-foreground">{lang === "bn" ? (viewCat.name_bn || viewCat.name) : viewCat.name}</p>
                <p className="text-sm text-muted-foreground">{lang === "bn" ? viewCat.name : viewCat.name_bn}</p>
              </div>
            </div>
            <div className="grid gap-3 sm:grid-cols-2 text-sm">
              <div className="rounded-lg border border-border bg-background p-3">
                <p className="text-xs text-muted-foreground mb-1">{lang === "bn" ? "ধরন" : "Type"}</p>
                <span className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${viewCat.type === "income" ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400" : "bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400"}`}>
                  {viewCat.type === "income" ? <TrendingUp className="h-3 w-3" /> : <TrendingDown className="h-3 w-3" />}
                  {viewCat.type === "income" ? (lang === "bn" ? "আয়" : "Income") : (lang === "bn" ? "ব্যয়" : "Expense")}
                </span>
              </div>
              <div className="rounded-lg border border-border bg-background p-3">
                <p className="text-xs text-muted-foreground mb-1">{lang === "bn" ? "স্ট্যাটাস" : "Status"}</p>
                <span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${viewCat.status === "active" ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400" : "bg-zinc-200 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-400"}`}>
                  {viewCat.status === "active" ? (lang === "bn" ? "সক্রিয়" : "Active") : (lang === "bn" ? "নিষ্ক্রিয়" : "Inactive")}
                </span>
              </div>
              <div className="rounded-lg border border-border bg-background p-3">
                <p className="text-xs text-muted-foreground mb-1">{lang === "bn" ? "ডিফল্ট" : "Default"}</p>
                <p className="font-medium">{viewCat.is_default ? (lang === "bn" ? "হ্যাঁ" : "Yes") : (lang === "bn" ? "না" : "No")}</p>
              </div>
              <div className="rounded-lg border border-border bg-background p-3">
                <p className="text-xs text-muted-foreground mb-1">{lang === "bn" ? "ব্যবহার" : "Usage"}</p>
                <p className="font-medium">{usage[viewCat.id] || 0} {lang === "bn" ? "লেনদেন" : "transactions"}</p>
              </div>
              {viewCat.description && (
                <div className="sm:col-span-2 rounded-lg border border-border bg-background p-3">
                  <p className="text-xs text-muted-foreground mb-1">{lang === "bn" ? "বর্ণনা" : "Description"}</p>
                  <p className="text-foreground">{viewCat.description}</p>
                </div>
              )}
              <div className="rounded-lg border border-border bg-background p-3">
                <p className="text-xs text-muted-foreground mb-1">{lang === "bn" ? "তৈরির তারিখ" : "Created"}</p>
                <p className="font-medium">{new Date(viewCat.created_at).toLocaleDateString(lang === "bn" ? "bn-BD" : "en-US")}</p>
              </div>
            </div>
            <div className="mt-5 flex justify-end gap-2">
              <button onClick={() => setViewCat(null)} className="rounded-lg border border-border px-4 py-2 text-sm">{lang === "bn" ? "বন্ধ" : "Close"}</button>
              <button onClick={() => { setViewCat(null); openEdit(viewCat); }} className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">
                <span className="flex items-center gap-1"><Edit className="h-3.5 w-3.5" /> {lang === "bn" ? "এডিট" : "Edit"}</span>
              </button>
            </div>
          </div>
        </div>
      )}
    </PageLayout>
  );
}
