"use client";

import { useCallback, useEffect, useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useToast } from "@/hooks/use-toast";
import { apiFetch, formatDateTime, ACTION_AR, ROLE_AR } from "@/lib/client-utils";
import { AuditLogDTO } from "@/lib/types";
import { History, Loader2, ShieldCheck } from "lucide-react";

const ACTION_COLORS: Record<string, string> = {
  LOGIN: "bg-emerald-100 text-emerald-800",
  LOGIN_FAILED: "bg-red-100 text-red-800",
  LOGOUT: "bg-slate-100 text-slate-700",
  CREATE: "bg-sky-100 text-sky-800",
  UPDATE: "bg-amber-100 text-amber-800",
  DELETE: "bg-red-100 text-red-800",
  PAYMENT: "bg-emerald-100 text-emerald-800",
  EXPORT: "bg-violet-100 text-violet-800",
  SEED: "bg-slate-100 text-slate-700",
};

export default function AuditView() {
  const { toast } = useToast();
  const [logs, setLogs] = useState<AuditLogDTO[]>([]);
  const [action, setAction] = useState("");
  const [loading, setLoading] = useState(true);

  const loadLogs = useCallback(async (a: string) => {
    setLoading(true);
    try {
      const data = await apiFetch<{ logs: AuditLogDTO[] }>(`/api/audit-logs?limit=200${a ? `&action=${a}` : ""}`);
      setLogs(data.logs);
    } catch (err) {
      toast({ title: "تعذر تحميل السجل", description: err instanceof Error ? err.message : "", variant: "destructive" });
    } finally {
      setLoading(false);
    }
  }, [toast]);

  useEffect(() => {
    loadLogs(action);
  }, [action, loadLogs]);

  return (
    <div className="space-y-5">
      <Card>
        <CardHeader className="pb-3">
          <div className="flex items-center justify-between gap-3 flex-wrap">
            <div>
              <CardTitle className="text-lg flex items-center gap-2">
                <History className="w-5 h-5 text-primary" />
                سجل الحركات الأمني (Audit Log)
              </CardTitle>
              <CardDescription>كافة العمليات التي جرت على النظام: من قام بها، متى، وماذا عدّل — غير قابل للتلاعب</CardDescription>
            </div>
            <Select value={action || "ALL"} onValueChange={(v) => setAction(v === "ALL" ? "" : v)}>
              <SelectTrigger className="w-48">
                <SelectValue placeholder="كل العمليات" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="ALL">كل العمليات</SelectItem>
                <SelectItem value="LOGIN">تسجيل دخول</SelectItem>
                <SelectItem value="LOGIN_FAILED">محاولات فاشلة</SelectItem>
                <SelectItem value="PAYMENT">استلام أقساط</SelectItem>
                <SelectItem value="CREATE">إضافة</SelectItem>
                <SelectItem value="UPDATE">تعديل</SelectItem>
                <SelectItem value="DELETE">حذف</SelectItem>
                <SelectItem value="EXPORT">تصدير</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardHeader>
        <CardContent>
          {loading ? (
            <div className="flex justify-center py-10"><Loader2 className="w-7 h-7 animate-spin text-primary" /></div>
          ) : logs.length === 0 ? (
            <p className="text-sm text-muted-foreground text-center py-10">لا توجد حركات مسجلة</p>
          ) : (
            <div className="space-y-1.5 max-h-[600px] overflow-y-auto">
              {logs.map((log) => (
                <div key={log.id} className="flex items-start gap-3 rounded-xl border p-3 hover:bg-accent/40">
                  <div className={`rounded-lg px-2 py-1 text-[11px] font-bold shrink-0 ${ACTION_COLORS[log.action] || "bg-muted"}`}>
                    {ACTION_AR[log.action] || log.action}
                  </div>
                  <div className="min-w-0 flex-1">
                    <p className="text-sm font-medium leading-snug">{log.details || `${log.action} على ${log.entity}`}</p>
                    <p className="text-[11px] text-muted-foreground mt-1">
                      {log.userName ?? "غير معروف"}
                      {log.role ? ` · ${ROLE_AR[log.role] || log.role}` : ""}
                      {log.entity ? ` · الكيان: ${log.entity}` : ""}
                      {log.entityId ? <span dir="ltr"> · #{log.entityId.slice(0, 8)}</span> : ""}
                    </p>
                  </div>
                  <div className="shrink-0">
                    <p className="text-[11px] text-muted-foreground whitespace-nowrap">{formatDateTime(log.createdAt)}</p>
                    <Badge variant="outline" className="text-[10px] mt-1">
                      <ShieldCheck className="w-3 h-3 ml-1" />
                      موثّق
                    </Badge>
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}