"use client";
// src/app/activities/page.tsx
import { useState, useEffect, useCallback, useMemo } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { ColumnDef } from "@tanstack/react-table";
import { AppShell } from "@/components/layout/AppShell";
import { DataTable } from "@/components/datatable/DataTable";
import { Button, PageHeader, Select } from "@/components/ui/index";
import { formatRelativeTime, formatDate } from "@/lib/utils";
import { Plus } from "lucide-react";
import { useAuth } from "@/hooks/useAuth";
import { hasPermission } from "@/lib/permissions";
import { useLanguage } from "@/i18n/LanguageContext";

const ACTIVITY_TYPE_ICONS: Record<string, string> = { CALL: "📞", EMAIL: "✉️", MEETING: "🤝", NOTE: "📝", TASK: "✅", DEMO: "💻", FOLLOW_UP: "🔄" };

export default function ActivitiesPage() {
  const router = useRouter();
  const { user } = useAuth();
  const { t, language } = useLanguage();
  const TYPE_LABELS = useMemo(
    () =>
      ({
        CALL: t("activities.typeCall"),
        EMAIL: t("activities.typeEmail"),
        MEETING: t("activities.typeMeeting"),
        NOTE: t("activities.typeNote"),
        TASK: t("activities.typeTask"),
        DEMO: t("activities.typeDemo"),
        FOLLOW_UP: t("activities.typeFollowUp"),
      }) as Record<string, string>,
    [t]
  );
  const TYPE_OPTIONS = useMemo(
    () => [
      { value: "", label: t("activities.allTypes") },
      ...Object.entries(TYPE_LABELS).map(([value, label]) => ({ value, label })),
    ],
    [t, TYPE_LABELS]
  );
  const [activities, setActivities] = useState<any[]>([]);
  const [meta, setMeta] = useState({ total: 0, page: 1, pageSize: 10, pageCount: 1 });
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [search, setSearch] = useState("");
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [typeFilter, setTypeFilter] = useState("");

  const canCreate = user && hasPermission(user.role, "activities:create");

  const fetchActivities = useCallback(async () => {
    setIsLoading(true);
    try {
      const params = new URLSearchParams({
        page: String(page),
        pageSize: String(pageSize),
        sortBy: "createdAt",
        sortOrder: "desc",
        ...(search && { search }),
        ...(typeFilter && { type: typeFilter }),
      });
      const res = await fetch(`/api/activities?${params}`);
      if (!res.ok) throw new Error("Failed");
      const data = await res.json();
      setActivities(data.data.items);
      setMeta(data.data.meta);
    } catch {
      setError(t("activities.loadError"));
    } finally {
      setIsLoading(false);
    }
  }, [page, pageSize, search, typeFilter, t]);

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

  const columns: ColumnDef<any, any>[] = useMemo(() => [
    {
      id: "type",
      header: t("table.colType"),
      enableSorting: false,
      cell: ({ row }) => {
        const act = row.original;
        return (
          <div className="flex items-center gap-2">
            <span className="text-lg">{ACTIVITY_TYPE_ICONS[act.type] ?? "📌"}</span>
            <span className="text-xs font-medium text-muted-foreground">{TYPE_LABELS[act.type] ?? act.type}</span>
          </div>
        );
      },
    },
    {
      accessorKey: "subject",
      header: t("table.colSubject"),
      cell: ({ row }) => {
        const a = row.original;
        return (
          <div>
            <p className="font-medium text-sm text-foreground">{a.subject}</p>
            {a.description && <p className="text-xs text-muted-foreground line-clamp-1 mt-0.5">{a.description}</p>}
          </div>
        );
      },
    },
    {
      id: "related",
      header: t("table.colRelatedTo"),
      enableSorting: false,
      cell: ({ row }) => {
        const a = row.original;
        if (a.lead) return <Link href={`/leads/${a.lead.id}`} className="text-xs text-primary hover:underline">{a.lead.firstName} {a.lead.lastName}</Link>;
        if (a.customer) return <Link href={`/customers/${a.customer.id}`} className="text-xs text-primary hover:underline">{a.customer.firstName} {a.customer.lastName}</Link>;
        if (a.deal) return <Link href={`/deals/${a.deal.id}`} className="text-xs text-primary hover:underline">{a.deal.title}</Link>;
        if (a.company) return <Link href={`/companies/${a.company.id}`} className="text-xs text-primary hover:underline">{a.company.name}</Link>;
        return <span className="text-xs text-muted-foreground">—</span>;
      },
    },
    {
      id: "user",
      header: t("table.colLoggedBy"),
      enableSorting: false,
      cell: ({ row }) => <span className="text-sm text-muted-foreground">{row.original.user?.name ?? "—"}</span>,
    },
    {
      accessorKey: "createdAt",
      header: t("table.colDate"),
      cell: ({ getValue }) => <span className="text-xs text-muted-foreground">{formatRelativeTime(getValue() as string, language)}</span>,
    },
  ], [t, TYPE_LABELS, language]);

  return (
    <AppShell breadcrumbs={[{ label: t("activities.title") }]}>
      <PageHeader title={`${t("activities.title")}${!isLoading ? ` (${meta.total})` : ""}`} description={t("activities.listSubtitle")}>
        {canCreate && (
          <Button onClick={() => router.push("/activities/new")}>
            <Plus className="w-4 h-4" /> {t("activities.logActivity")}
          </Button>
        )}
      </PageHeader>
      <div className="flex gap-3 mb-4">
        <div className="w-44">
          <Select options={TYPE_OPTIONS} value={typeFilter} onChange={(e) => setTypeFilter(e.target.value)} />
        </div>
        {typeFilter && (
          <Button variant="ghost" size="sm" onClick={() => setTypeFilter("")}>
            {t("common.clear")}
          </Button>
        )}
      </div>
      <DataTable
        data={activities} columns={columns} isLoading={isLoading} error={error}
        pageCount={meta.pageCount} page={meta.page} pageSize={meta.pageSize} total={meta.total}
        onPageChange={setPage} onPageSizeChange={(s) => { setPageSize(s); setPage(1); }}
        searchValue={search} onSearchChange={setSearch} searchPlaceholder={t("activities.searchPlaceholder")}
        emptyTitle={t("activities.emptyListTitle")}
        emptyDescription={t("activities.emptyListDescription")}
        emptyAction={
          canCreate ? (
            <Button onClick={() => router.push("/activities/new")} size="sm">
              <Plus className="w-4 h-4" /> {t("activities.logActivity")}
            </Button>
          ) : undefined
        }
      />
    </AppShell>
  );
}