"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { AppShell } from "@/components/layout/AppShell";
import { Badge, Button, Card, CardContent, PageHeader, Select } from "@/components/ui/index";
import { useLanguage } from "@/i18n/LanguageContext";
import { Repeat, Plus, Trash2, MoreHorizontal, Pencil } from "lucide-react";
import { DataTable } from "@/components/datatable/DataTable";
import { ColumnDef } from "@tanstack/react-table";
import { formatCurrency } from "@/lib/utils";
import { toast } from "sonner";
import { useAuth } from "@/hooks/useAuth";
import { hasPermission } from "@/lib/permissions";

export default function SubscriptionsPage() {
  const router = useRouter();
  const { user } = useAuth();
  const { language } = useLanguage();
  const isArabic = language === "ar";
  const canRead = !!user && hasPermission(user.role, "subscriptions:read");
  const canCreate = !!user && hasPermission(user.role, "subscriptions:create");
  const canUpdate = !!user && hasPermission(user.role, "subscriptions:update");
  const canDelete = !!user && hasPermission(user.role, "subscriptions:delete");
  const [items, setItems] = useState<any[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [statusFilter, setStatusFilter] = useState("");
  const [sortBy, setSortBy] = useState("createdAt");
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [meta, setMeta] = useState({ total: 0, page: 1, pageSize: 10, pageCount: 1 });
  const [openMenuId, setOpenMenuId] = useState<string | null>(null);
  const [stats, setStats] = useState({
    total: 0,
    active: 0,
    trial: 0,
    expiringSoon: 0,
    mrr: 0,
  });

  const fetchItems = useCallback(async () => {
    setIsLoading(true);
    try {
      const params = new URLSearchParams({
        page: String(page),
        pageSize: String(pageSize),
        ...(search && { search }),
        ...(statusFilter && { status: statusFilter }),
        sortBy,
        sortOrder,
      });
      const [listRes, statsRes] = await Promise.all([
        fetch(`/api/subscriptions?${params}`),
        fetch(`/api/subscriptions/stats?${params}`),
      ]);
      const listJson = await listRes.json();
      const statsJson = await statsRes.json();
      if (!listRes.ok) throw new Error(listJson.error ?? "Failed");
      if (!statsRes.ok) throw new Error(statsJson.error ?? "Failed");
      setItems(listJson.data.items);
      setMeta(listJson.data.meta);
      setStats(statsJson.data ?? { total: 0, active: 0, trial: 0, expiringSoon: 0, mrr: 0 });
    } catch (e: any) {
      setItems([]);
      toast.error(e.message ?? (isArabic ? "تعذر تحميل الاشتراكات" : "Failed to load subscriptions"));
    } finally {
      setIsLoading(false);
    }
  }, [isArabic, page, pageSize, search, sortBy, sortOrder, statusFilter]);

  useEffect(() => {
    fetchItems();
  }, [fetchItems]);

  useEffect(() => {
    setPage(1);
  }, [search, statusFilter]);

  const deleteItem = useCallback(async (id: string) => {
    try {
      const res = await fetch(`/api/subscriptions/${id}`, { method: "DELETE" });
      if (!res.ok) throw new Error("Failed");
      toast.success(isArabic ? "تم حذف الاشتراك" : "Subscription deleted");
      fetchItems();
    } catch {
      toast.error(isArabic ? "تعذر حذف الاشتراك" : "Failed to delete subscription");
    }
  }, [fetchItems, isArabic]);

  const billingCycleLabel = useCallback(
    (value?: string | null) => {
      if (!value) return "—";
      const mapAr: Record<string, string> = {
        daily: "يومي",
        weekly: "أسبوعي",
        monthly: "شهري",
        quarterly: "ربع سنوي",
        yearly: "سنوي",
      };
      const mapEn: Record<string, string> = {
        daily: "Daily",
        weekly: "Weekly",
        monthly: "Monthly",
        quarterly: "Quarterly",
        yearly: "Yearly",
      };
      const key = value.toLowerCase();
      return isArabic ? (mapAr[key] ?? value) : (mapEn[key] ?? value);
    },
    [isArabic]
  );

  const subscriptionStatusLabel = useCallback(
    (value?: string | null) => {
      if (!value) return "—";
      const mapAr: Record<string, string> = {
        TRIAL: "تجريبي",
        ACTIVE: "نشط",
        PAUSED: "موقوف",
        CANCELLED: "ملغي",
        EXPIRED: "منتهي",
      };
      const mapEn: Record<string, string> = {
        TRIAL: "Trial",
        ACTIVE: "Active",
        PAUSED: "Paused",
        CANCELLED: "Cancelled",
        EXPIRED: "Expired",
      };
      return isArabic ? (mapAr[value] ?? value) : (mapEn[value] ?? value);
    },
    [isArabic]
  );

  const columns: ColumnDef<any, any>[] = useMemo(
    () => [
      {
        accessorKey: "name",
        header: isArabic ? "الاشتراك" : "Subscription",
        cell: ({ row }) => (
          <button
            type="button"
            onClick={() => router.push(`/subscriptions/${row.original.id}`)}
            className="font-medium text-primary hover:underline"
          >
            {row.original.name}
          </button>
        ),
      },
      {
        accessorKey: "billingCycle",
        header: isArabic ? "الدورة" : "Cycle",
        cell: ({ row }) => <span>{billingCycleLabel(row.original.billingCycle)}</span>,
      },
      {
        accessorKey: "amount",
        header: isArabic ? "المبلغ" : "Amount",
        cell: ({ row }) => (
          <span className="font-semibold">{formatCurrency(row.original.amount, row.original.currency)}</span>
        ),
      },
      {
        accessorKey: "status",
        header: isArabic ? "الحالة" : "Status",
        cell: ({ row }) => <Badge variant="secondary">{subscriptionStatusLabel(row.original.status)}</Badge>,
      },
      {
        id: "actions",
        header: "",
        enableSorting: false,
        cell: ({ row }) => {
          const item = row.original;
          const isOpen = openMenuId === item.id;
          const canManage = canUpdate || canDelete;
          if (!canManage) return null;
          return (
            <div className="relative flex justify-end">
              <button
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  setOpenMenuId(isOpen ? null : item.id);
                }}
                className="p-1.5 rounded-lg hover:bg-accent text-muted-foreground"
              >
                <MoreHorizontal className="w-4 h-4" />
              </button>
              {isOpen && (
                <>
                  <div className="fixed inset-0 z-10" onClick={() => setOpenMenuId(null)} />
                  <div className="absolute top-full end-0 mt-1 bg-popover border border-border rounded-lg shadow-lg py-1 z-50 min-w-[140px] animate-fade-in">
                    {canUpdate && (
                    <button
                      onClick={() => {
                        setOpenMenuId(null);
                        router.push(`/subscriptions/${item.id}/edit`);
                      }}
                      className="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent w-full"
                    >
                      <Pencil className="w-4 h-4" /> {isArabic ? "تعديل" : "Edit"}
                    </button>
                    )}
                    {canDelete && (
                    <button
                      onClick={() => {
                        setOpenMenuId(null);
                        deleteItem(item.id);
                      }}
                      className="flex items-center gap-2 px-3 py-1.5 text-sm text-destructive hover:bg-accent w-full"
                    >
                      <Trash2 className="w-4 h-4" /> {isArabic ? "حذف" : "Delete"}
                    </button>
                    )}
                  </div>
                </>
              )}
            </div>
          );
        },
      },
    ],
    [billingCycleLabel, deleteItem, isArabic, openMenuId, router, subscriptionStatusLabel]
  );

  return (
    <AppShell breadcrumbs={[{ label: isArabic ? "الاشتراكات" : "Subscriptions" }]}>
      {!canRead ? (
        <Card>
          <CardContent className="py-10 text-center text-muted-foreground">
            {isArabic ? "ليس لديك صلاحية الوصول إلى هذا القسم." : "You do not have permission to access this section."}
          </CardContent>
        </Card>
      ) : (
      <>
      <PageHeader title={isArabic ? "الاشتراكات" : "Subscriptions"} description={isArabic ? "إدارة الاشتراكات الدورية." : "Manage recurring subscriptions."}>
        {canCreate && (
        <Button onClick={() => router.push("/subscriptions/new")}>
          <Plus className="w-4 h-4" /> {isArabic ? "اشتراك جديد" : "New Subscription"}
        </Button>
        )}
      </PageHeader>

      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-3 mb-4">
        <Card><CardContent className="py-4"><p className="text-xs text-muted-foreground">{isArabic ? "إجمالي الاشتراكات" : "Total Subscriptions"}</p><p className="text-2xl font-semibold mt-1">{stats.total}</p></CardContent></Card>
        <Card><CardContent className="py-4"><p className="text-xs text-muted-foreground">{isArabic ? "الاشتراكات النشطة" : "Active Subscriptions"}</p><p className="text-2xl font-semibold mt-1">{stats.active}</p></CardContent></Card>
        <Card><CardContent className="py-4"><p className="text-xs text-muted-foreground">{isArabic ? "الفترة التجريبية" : "Trial Subscriptions"}</p><p className="text-2xl font-semibold mt-1">{stats.trial}</p></CardContent></Card>
        <Card><CardContent className="py-4"><p className="text-xs text-muted-foreground">{isArabic ? "تجديد خلال 30 يوم" : "Renewing in 30 Days"}</p><p className="text-2xl font-semibold mt-1">{stats.expiringSoon}</p></CardContent></Card>
        <Card><CardContent className="py-4"><p className="text-xs text-muted-foreground">{isArabic ? "الإيراد الشهري المتوقع" : "Projected Monthly Revenue"}</p><p className="text-lg font-semibold mt-1">{formatCurrency(stats.mrr, "USD")}</p></CardContent></Card>
      </div>

      <div className="mb-4 max-w-xs">
        <Select
          label={isArabic ? "فلتر الحالة" : "Status Filter"}
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value)}
          options={[
            { value: "", label: isArabic ? "الكل" : "All" },
            { value: "TRIAL", label: isArabic ? "تجريبي" : "Trial" },
            { value: "ACTIVE", label: isArabic ? "نشط" : "Active" },
            { value: "PAUSED", label: isArabic ? "موقوف" : "Paused" },
            { value: "CANCELLED", label: isArabic ? "ملغي" : "Cancelled" },
            { value: "EXPIRED", label: isArabic ? "منتهي" : "Expired" },
          ]}
        />
      </div>

      <DataTable
        data={items}
        columns={columns}
        isLoading={isLoading}
        page={meta.page}
        pageSize={meta.pageSize}
        total={meta.total}
        pageCount={meta.pageCount}
        onPageChange={setPage}
        onPageSizeChange={(s) => {
          setPageSize(s);
          setPage(1);
        }}
        searchValue={search}
        onSearchChange={setSearch}
        searchPlaceholder={isArabic ? "بحث في الاشتراكات..." : "Search subscriptions..."}
        sortBy={sortBy}
        sortOrder={sortOrder}
        onSortChange={(by, order) => {
          setSortBy(by);
          setSortOrder(order);
        }}
        getRowId={(r) => r.id}
        getRowClassName={(r) => (openMenuId === r.id ? "relative z-50" : undefined)}
        emptyTitle={isArabic ? "لا يوجد اشتراكات" : "No subscriptions"}
        emptyDescription={isArabic ? "أضف أول اشتراك للبدء." : "Create your first subscription to get started."}
        emptyAction={
          <div className="inline-flex items-center text-muted-foreground text-sm">
            <Repeat className="w-4 h-4 me-1" />
            {isArabic ? "لا توجد بيانات" : "No data"}
          </div>
        }
      />
      </>
      )}
    </AppShell>
  );
}