'use client';

import { useEffect, useState } from 'react';
import { apiFetchJson } from '@/lib/auth';

interface AuditLog {
  id: string;
  action: string;
  entityType: string | null;
  entityId: string | null;
  userId: string | null;
  tenantId: string | null;
  metadata: Record<string, unknown> | null;
  createdAt: string;
  ipAddress: string | null;
}

interface AuditLogsData {
  data: AuditLog[];
  meta: { page: number; limit: number; total: number; totalPages: number };
}

const ACTION_COLOR: Record<string, string> = {
  CREATE: 'bg-emerald-100 text-emerald-700',
  UPDATE: 'bg-indigo-100 text-indigo-700',
  DELETE: 'bg-red-100 text-red-700',
  LOGIN: 'bg-blue-100 text-blue-700',
  LOGOUT: 'bg-slate-100 text-slate-600',
  VIEW: 'bg-amber-100 text-amber-700',
};

const ACTION_DOT: Record<string, string> = {
  CREATE: 'bg-emerald-500',
  UPDATE: 'bg-indigo-500',
  DELETE: 'bg-red-500',
  LOGIN: 'bg-blue-500',
  LOGOUT: 'bg-slate-400',
  VIEW: 'bg-amber-500',
};

function getActionGroup(action: string) {
  const upper = action.toUpperCase();
  for (const key of Object.keys(ACTION_COLOR)) {
    if (upper.includes(key)) return key;
  }
  return 'VIEW';
}

function fmtDate(d: string) {
  return new Date(d).toLocaleString('tr-TR', {
    day: '2-digit', month: 'short', year: 'numeric',
    hour: '2-digit', minute: '2-digit',
  });
}

export default function AuditLogsPage() {
  const [data, setData] = useState<AuditLogsData | null>(null);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
  const [expandedId, setExpandedId] = useState<string | null>(null);

  const load = async (p = 1) => {
    setLoading(true);
    try {
      const res = await apiFetchJson<AuditLogsData>(`/v1/platform/audit-logs?page=${p}&limit=20`);
      if (res.error === null && res.data) setData(res.data);
    } finally {
      setLoading(false);
    }
  };

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

  return (
    <div className="space-y-8">
      {/* Page header */}
      <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 px-8 py-10 text-white shadow-xl">
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute -top-16 -right-16 h-56 w-56 rounded-full bg-slate-500/10 blur-3xl" />
        </div>
        <div className="relative flex items-start justify-between">
          <div>
            <div className="flex items-center gap-2 text-slate-300 text-sm font-medium mb-2">
              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
              Sistem Logları
            </div>
            <h1 className="text-3xl font-bold tracking-tight">Audit Log</h1>
            <p className="mt-1.5 text-slate-300">Sistemdeki tüm işlem kayıtlarını inceleyin.</p>
          </div>
          {data && (
            <div className="text-right">
              <div className="text-3xl font-bold">{data.meta.total}</div>
              <div className="text-sm text-slate-400">Toplam kayıt</div>
            </div>
          )}
        </div>
      </div>

      {/* Legend */}
      <div className="flex flex-wrap gap-3">
        {Object.entries(ACTION_COLOR).map(([key, cls]) => (
          <div key={key} className="flex items-center gap-1.5">
            <div className={`h-2.5 w-2.5 rounded-full ${ACTION_DOT[key]}`} />
            <span className="text-xs text-slate-500">{key}</span>
          </div>
        ))}
      </div>

      {/* Logs */}
      <div className="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden">
        {loading ? (
          <div className="p-6 space-y-3">
            {Array.from({ length: 10 }).map((_, i) => (
              <div key={i} className="h-14 rounded-xl bg-slate-100 animate-pulse" />
            ))}
          </div>
        ) : !data?.data.length ? (
          <div className="py-16 text-center text-slate-400">
            <svg className="mx-auto h-10 w-10 mb-3 opacity-40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
            <p className="text-sm">Kayıt bulunamadı</p>
          </div>
        ) : (
          <div className="divide-y divide-slate-100">
            {data.data.map((log) => {
              const group = getActionGroup(log.action);
              const isExpanded = expandedId === log.id;
              const hasMetadata = !!log.metadata && Object.keys(log.metadata).length > 0;
              return (
                <div key={log.id} className="hover:bg-slate-50/60 transition-colors">
                  <div
                    className="px-6 py-4 flex items-start gap-4 cursor-pointer"
                    onClick={() => hasMetadata && setExpandedId(isExpanded ? null : log.id)}
                  >
                    {/* Dot */}
                    <div className="mt-1.5 shrink-0">
                      <div className={`h-2.5 w-2.5 rounded-full ${ACTION_DOT[group]}`} />
                    </div>

                    {/* Content */}
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 flex-wrap">
                        <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${ACTION_COLOR[group]}`}>
                          {log.action}
                        </span>
                        {log.entityType && (
                          <span className="text-xs text-slate-500 font-mono bg-slate-100 px-2 py-0.5 rounded-md">
                            {log.entityType}
                            {log.entityId && <span className="text-slate-400">#{log.entityId.slice(0, 8)}</span>}
                          </span>
                        )}
                        {log.tenantId && (
                          <span className="text-xs text-slate-400 font-mono">
                            tenant:{log.tenantId.slice(0, 8)}
                          </span>
                        )}
                      </div>
                      <div className="flex items-center gap-3 mt-1.5 text-xs text-slate-400">
                        <span>{fmtDate(log.createdAt)}</span>
                        {log.userId && <span>· User: {log.userId.slice(0, 8)}</span>}
                        {log.ipAddress && <span>· {log.ipAddress}</span>}
                      </div>
                    </div>

                    {/* Expand indicator */}
                    {hasMetadata && (
                      <div className="shrink-0 mt-1">
                        <svg
                          className={`h-4 w-4 text-slate-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                        </svg>
                      </div>
                    )}
                  </div>

                  {/* Expanded metadata */}
                  {isExpanded && hasMetadata && (
                    <div className="px-6 pb-4 pl-12">
                      <div className="rounded-xl bg-slate-900 p-4 overflow-x-auto">
                        <pre className="text-xs text-emerald-400 font-mono leading-relaxed">
                          {JSON.stringify(log.metadata, null, 2)}
                        </pre>
                      </div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        )}

        {/* Pagination */}
        {data && data.meta.totalPages > 1 && (
          <div className="px-6 py-4 border-t border-slate-100 flex items-center justify-between">
            <span className="text-sm text-slate-500">
              {data.meta.total} kayıttan {(data.meta.page - 1) * data.meta.limit + 1}–{Math.min(data.meta.page * data.meta.limit, data.meta.total)} gösteriliyor
            </span>
            <div className="flex items-center gap-2">
              <button
                onClick={() => setPage((p) => Math.max(1, p - 1))}
                disabled={page === 1}
                className="rounded-lg border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-50 disabled:opacity-40 transition-colors"
              >
                ← Önceki
              </button>
              <div className="flex gap-1">
                {Array.from({ length: Math.min(5, data.meta.totalPages) }, (_, i) => {
                  const p = Math.max(1, Math.min(data.meta.totalPages - 4, page - 2)) + i;
                  return (
                    <button
                      key={p}
                      onClick={() => setPage(p)}
                      className={`h-8 w-8 rounded-lg text-sm font-medium transition-colors ${
                        p === page ? 'bg-indigo-600 text-white' : 'text-slate-600 hover:bg-slate-100'
                      }`}
                    >
                      {p}
                    </button>
                  );
                })}
              </div>
              <button
                onClick={() => setPage((p) => Math.min(data.meta.totalPages, p + 1))}
                disabled={page === data.meta.totalPages}
                className="rounded-lg border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-50 disabled:opacity-40 transition-colors"
              >
                Sonraki →
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}