"use client";

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

export default function UtilitiesGoalsPage() {
  const router = useRouter();
  const { user } = useAuth();
  const { language } = useLanguage();
  const isArabic = language === "ar";
  const canRead = !!user && hasPermission(user.role, "goals:read");
  const canCreate = !!user && hasPermission(user.role, "goals:create");
  const canUpdate = !!user && hasPermission(user.role, "goals:update");
  const canDelete = !!user && hasPermission(user.role, "goals:delete");
  const [items, setItems] = useState<any[]>([]);
  const [users, setUsers] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [goalTypeFilter, setGoalTypeFilter] = useState("");
  const [openMenuId, setOpenMenuId] = useState<string | null>(null);

  const [openModal, setOpenModal] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [subject, setSubject] = useState("");
  const [goalType, setGoalType] = useState("زيادة عدد العملاء");
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");
  const [targetValue, setTargetValue] = useState("100");
  const [achievedValue, setAchievedValue] = useState("0");
  const [assigneeId, setAssigneeId] = useState("");
  const [saving, setSaving] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams({
        ...(search && { search }),
        ...(goalTypeFilter && { goalType: goalTypeFilter }),
      });
      const [goalsRes, usersRes] = await Promise.all([
        fetch(`/api/goals?${params}`),
        fetch("/api/users/assignable?pageSize=100"),
      ]);
      const goalsJson = await goalsRes.json();
      const usersJson = await usersRes.json();
      if (!goalsRes.ok) throw new Error(goalsJson.error ?? "Failed");
      setItems(goalsJson.data ?? []);
      setUsers(usersJson.data?.items ?? []);
    } catch (e: any) {
      setItems([]);
      toast.error(e.message ?? (isArabic ? "تعذر تحميل الأهداف" : "Failed to load goals"));
    } finally {
      setLoading(false);
    }
  }, [goalTypeFilter, isArabic, search]);

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

  const resetForm = () => {
    setEditingId(null);
    setSubject("");
    setGoalType("زيادة عدد العملاء");
    setStartDate("");
    setEndDate("");
    setTargetValue("100");
    setAchievedValue("0");
    setAssigneeId("");
  };

  const onCreate = () => {
    resetForm();
    setOpenModal(true);
  };

  const onEdit = (row: any) => {
    setEditingId(row.id);
    setSubject(row.subject ?? "");
    setGoalType(row.goalType ?? "زيادة عدد العملاء");
    setStartDate((row.startDate ?? "").slice(0, 10));
    setEndDate((row.endDate ?? "").slice(0, 10));
    setTargetValue(String(row.targetValue ?? 0));
    setAchievedValue(String(row.achievedValue ?? 0));
    setAssigneeId(row.assigneeId ?? "");
    setOpenModal(true);
  };

  const onSave = async () => {
    if (!subject.trim()) return;
    setSaving(true);
    try {
      const selectedUser = users.find((u) => u.id === assigneeId);
      const payload = {
        subject: subject.trim(),
        goalType,
        startDate,
        endDate,
        targetValue: Number(targetValue) || 0,
        achievedValue: Number(achievedValue) || 0,
        assigneeId: assigneeId || null,
        assigneeName: selectedUser?.name ?? "",
      };
      const url = editingId ? `/api/goals/${editingId}` : "/api/goals";
      const method = editingId ? "PATCH" : "POST";
      const res = await fetch(url, {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      const json = await res.json();
      if (!res.ok) throw new Error(json.error ?? "Failed");
      toast.success(isArabic ? "تم حفظ الهدف" : "Goal saved");
      setOpenModal(false);
      resetForm();
      load();
    } catch (e: any) {
      toast.error(e.message ?? (isArabic ? "تعذر حفظ الهدف" : "Failed to save goal"));
    } finally {
      setSaving(false);
    }
  };

  const onDelete = async (id: string) => {
    try {
      const res = await fetch(`/api/goals/${id}`, { method: "DELETE" });
      const json = await res.json();
      if (!res.ok) throw new Error(json.error ?? "Failed");
      toast.success(isArabic ? "تم حذف الهدف" : "Goal deleted");
      load();
    } catch (e: any) {
      toast.error(e.message ?? (isArabic ? "تعذر حذف الهدف" : "Failed to delete goal"));
    }
  };

  const columns: ColumnDef<any, any>[] = useMemo(
    () => [
      {
        accessorKey: "subject",
        header: isArabic ? "موضوع" : "Subject",
        cell: ({ row }) => (
          <button
            type="button"
            onClick={() => router.push(`/utilities/goals/${row.original.id}`)}
            className="font-medium text-primary hover:underline"
          >
            {row.original.subject}
          </button>
        ),
      },
      { accessorKey: "assigneeName", header: isArabic ? "عضو فريق العمل" : "Team Member", cell: ({ row }) => <span>{row.original.assigneeName || "—"}</span> },
      { accessorKey: "achievedValue", header: isArabic ? "إنجاز" : "Achieved" },
      { accessorKey: "startDate", header: isArabic ? "تاريخ البدء" : "Start Date", cell: ({ row }) => <span>{String(row.original.startDate || "").slice(0, 10)}</span> },
      { accessorKey: "endDate", header: isArabic ? "تاريخ الانتهاء" : "End Date", cell: ({ row }) => <span>{String(row.original.endDate || "").slice(0, 10)}</span> },
      { accessorKey: "goalType", header: isArabic ? "نوع الهدف" : "Goal Type" },
      {
        id: "progress",
        header: isArabic ? "تقدم" : "Progress",
        cell: ({ row }) => {
          const target = Number(row.original.targetValue || 0) || 1;
          const achieved = Number(row.original.achievedValue || 0);
          const pct = Math.max(0, Math.min(100, Math.round((achieved / target) * 100)));
          return <span className="font-semibold">{pct}%</span>;
        },
      },
      {
        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={() => 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);
                        onEdit(item);
                      }}
                      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);
                        onDelete(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>
          );
        },
      },
    ],
    [isArabic, openMenuId, router]
  );

  return (
    <AppShell breadcrumbs={[{ label: isArabic ? "الأهداف" : "Goals" }]}>
      {!canRead ? (
        <div className="rounded-lg border border-border p-6 text-center text-muted-foreground">
          {isArabic ? "ليس لديك صلاحية الوصول إلى هذا القسم." : "You do not have permission to access this section."}
        </div>
      ) : (
      <>
      <PageHeader
        title={isArabic ? "الأهداف" : "Goals"}
        description={isArabic ? "إدارة الأهداف ومتابعة التقدم." : "Manage goals and track progress."}
      >
        {canCreate && (
        <Button onClick={onCreate}>
          <Plus className="w-4 h-4" /> {isArabic ? "هدف جديد" : "New Goal"}
        </Button>
        )}
      </PageHeader>

      <div className="mb-4 max-w-xs">
        <Select
          label={isArabic ? "فلتر النوع" : "Type Filter"}
          value={goalTypeFilter}
          onChange={(e) => setGoalTypeFilter(e.target.value)}
          options={[
            { value: "", label: isArabic ? "الكل" : "All" },
            { value: "زيادة عدد العملاء", label: isArabic ? "زيادة عدد العملاء" : "Increase customers" },
            { value: "تحقيق إجمالي الدخل", label: isArabic ? "تحقيق إجمالي الدخل" : "Reach total income" },
            { value: "المبلغ المتوفر", label: isArabic ? "المبلغ المتوفر" : "Available amount" },
            { value: "تحويل X من العملاء المحتملين", label: isArabic ? "تحويل العملاء المحتملين" : "Lead conversion" },
          ]}
        />
      </div>

      <DataTable
        data={items}
        columns={columns}
        isLoading={loading}
        searchValue={search}
        onSearchChange={setSearch}
        searchPlaceholder={isArabic ? "بحث..." : "Search..."}
        page={1}
        pageSize={items.length || 10}
        total={items.length}
        pageCount={1}
        onPageChange={() => null}
        onPageSizeChange={() => null}
        sortBy="createdAt"
        sortOrder="desc"
        onSortChange={() => null}
        getRowId={(r) => r.id}
      />

      <Modal
        open={openModal}
        onClose={() => setOpenModal(false)}
        title={editingId ? (isArabic ? "تعديل الهدف" : "Edit Goal") : (isArabic ? "هدف جديد" : "New Goal")}
      >
        <div className="p-6 space-y-4">
          <Input label={isArabic ? "موضوع" : "Subject"} value={subject} onChange={(e) => setSubject(e.target.value)} />
          <Select
            label={isArabic ? "نوع الهدف" : "Goal Type"}
            value={goalType}
            onChange={(e) => setGoalType(e.target.value)}
            options={[
              { value: "زيادة عدد العملاء", label: isArabic ? "زيادة عدد العملاء" : "Increase customers" },
              { value: "تحقيق إجمالي الدخل", label: isArabic ? "تحقيق إجمالي الدخل" : "Reach total income" },
              { value: "المبلغ المتوفر", label: isArabic ? "المبلغ المتوفر" : "Available amount" },
              { value: "تحويل X من العملاء المحتملين", label: isArabic ? "تحويل العملاء المحتملين" : "Lead conversion" },
            ]}
          />
          <div className="grid grid-cols-2 gap-3">
            <Input label={isArabic ? "تاريخ البدء" : "Start Date"} type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
            <Input label={isArabic ? "تاريخ الانتهاء" : "End Date"} type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} />
          </div>
          <div className="grid grid-cols-2 gap-3">
            <Input label={isArabic ? "المستهدف" : "Target"} type="number" value={targetValue} onChange={(e) => setTargetValue(e.target.value)} />
            <Input label={isArabic ? "المنجز" : "Achieved"} type="number" value={achievedValue} onChange={(e) => setAchievedValue(e.target.value)} />
          </div>
          <Select
            label={isArabic ? "عضو فريق العمل" : "Assignee"}
            value={assigneeId}
            onChange={(e) => setAssigneeId(e.target.value)}
            options={[
              { value: "", label: isArabic ? "غير محدد" : "Unassigned" },
              ...users.map((u) => ({ value: u.id, label: u.name })),
            ]}
          />
          <div className="flex justify-end gap-2">
            <Button type="button" variant="outline" onClick={() => setOpenModal(false)} disabled={saving}>
              {isArabic ? "إلغاء" : "Cancel"}
            </Button>
            <Button type="button" onClick={onSave} loading={saving}>
              {isArabic ? "حفظ" : "Save"}
            </Button>
          </div>
        </div>
      </Modal>
      </>
      )}
    </AppShell>
  );
}