'use client';

import Link from 'next/link';
import { ArrowLeft, User, Building2, Monitor, AlertCircle, CheckCircle } from 'lucide-react';
import { usePageHeader } from '@client/contexts/PageHeaderContext';
import { useLanguage } from '@client/contexts/LanguageContext';

const auditLog = {
  id: 'audit-8821',
  eventType: 'MENU_ITEM_DELETED',
  severity: 'warning',
  actor: {
    name: 'Marco Khalid',
    email: 'marco@rusticfork.com',
    role: 'Restaurant Manager',
    id: 'user-001',
  },
  target: {
    type: 'MenuItem',
    id: 'item-042',
    name: 'Seasonal Truffle Pasta',
  },
  restaurant: 'The Rustic Fork',
  branch: 'Downtown',
  timestamp: 'Mar 14, 2026 · 3:42:18 PM UTC',
  ipAddress: '192.168.1.105',
  userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) Chrome/122.0',
  beforeState: {
    id: 'item-042',
    name: 'Seasonal Truffle Pasta',
    price: 32.00,
    category: 'Mains',
    available: true,
    description: 'Fresh pasta with seasonal truffle, parmesan, and herbs',
  },
  afterState: null,
};

const severityConfig = {
  info: { label: 'Info', color: 'hsl(var(--info))', bg: 'hsl(var(--info-bg))', icon: CheckCircle },
  warning: { label: 'Warning', color: 'hsl(var(--warning))', bg: 'hsl(var(--warning-bg))', icon: AlertCircle },
  critical: { label: 'Critical', color: 'hsl(var(--danger))', bg: 'hsl(var(--danger-bg))', icon: AlertCircle },
};

export default function AuditLogDetailPage({ params }: { params: { id?: string } }) {
  const { t } = useLanguage();
  usePageHeader(t('support.auditLogDetail', "Audit Log Detail"), t('support.auditLogDetailDescription', "Full event details and state changes"));
  
  const severityConfig = {
    info: { label: t('common.info', 'Info'), color: 'hsl(var(--info))', bg: 'hsl(var(--info-bg))', icon: CheckCircle },
    warning: { label: t('common.warning', 'Warning'), color: 'hsl(var(--warning))', bg: 'hsl(var(--warning-bg))', icon: AlertCircle },
    critical: { label: t('common.critical', 'Critical'), color: 'hsl(var(--danger))', bg: 'hsl(var(--danger-bg))', icon: AlertCircle },
  };

  const cfg = severityConfig[auditLog.severity as keyof typeof severityConfig];
  const SeverityIcon = cfg.icon;

  return (
    <>
      <div className="flex items-center gap-3 mb-6">
        <Link href="/admin/support" className="btn-ghost p-1.5"><ArrowLeft size={16} /></Link>
        <div className="flex items-center gap-3">
          <div className="w-9 h-9 rounded-xl flex items-center justify-center" style={{ backgroundColor: cfg.bg }}>
            <SeverityIcon size={18} style={{ color: cfg.color }} />
          </div>
          <div>
            <h2 className="font-bold text-base font-mono" style={{ color: 'hsl(var(--foreground))' }}>{auditLog.eventType}</h2>
            <span className="text-xs px-2 py-0.5 rounded-full font-semibold" style={{ backgroundColor: cfg.bg, color: cfg.color }}>{cfg.label}</span>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
        <div className="lg:col-span-2 space-y-5">
          {/* Event overview */}
          <div className="card p-5">
            <h3 className="font-semibold mb-4" style={{ color: 'hsl(var(--foreground))' }}>{t('support.eventDetails', 'Event Details')}</h3>
            <div className="grid grid-cols-2 gap-4 text-sm">
              {[
                { label: t('support.eventType', 'Event Type'), value: auditLog.eventType },
                { label: t('support.timestamp', 'Timestamp'), value: auditLog.timestamp },
                { label: t('support.restaurant', 'Restaurant'), value: auditLog.restaurant },
                { label: t('support.branch', 'Branch'), value: auditLog.branch },
                { label: t('support.ipAddress', 'IP Address'), value: auditLog.ipAddress },
                { label: t('support.logId', 'Log ID'), value: auditLog.id },
              ].map(item => (
                <div key={item.label}>
                  <p className="text-xs" style={{ color: 'hsl(var(--muted-foreground))' }}>{item.label}</p>
                  <p className="font-medium mt-0.5 font-mono text-xs" style={{ color: 'hsl(var(--foreground))' }}>{item.value}</p>
                </div>
              ))}
            </div>
          </div>

          {/* Before / After state */}
          <div className="card p-5">
            <h3 className="font-semibold mb-4" style={{ color: 'hsl(var(--foreground))' }}>{t('support.stateChanges', 'State Changes')}</h3>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'hsl(var(--success))' }}>{t('support.before', 'Before')}</p>
                {auditLog.beforeState ? (
                  <div className="p-4 rounded-xl text-xs font-mono space-y-1.5" style={{ backgroundColor: 'hsl(var(--success-bg))', border: '1px solid hsl(var(--success-border))' }}>
                    {Object.entries(auditLog.beforeState).map(([k, v]) => (
                      <div key={k} className="flex gap-2">
                        <span style={{ color: 'hsl(var(--success))' }}>{k}:</span>
                        <span style={{ color: 'hsl(var(--foreground))' }}>{JSON.stringify(v)}</span>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="p-4 rounded-xl text-xs" style={{ backgroundColor: 'hsl(var(--muted))' }}>
                    <span style={{ color: 'hsl(var(--muted-foreground))' }}>{t('support.nullNewRecord', 'null (new record)')}</span>
                  </div>
                )}
              </div>
              <div>
                <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'hsl(var(--danger))' }}>{t('support.after', 'After')}</p>
                {auditLog.afterState ? (
                  <div className="p-4 rounded-xl text-xs font-mono space-y-1.5" style={{ backgroundColor: 'hsl(var(--danger-bg))', border: '1px solid hsl(var(--danger-border))' }}>
                    {Object.entries(auditLog.afterState).map(([k, v]) => (
                      <div key={k} className="flex gap-2">
                        <span style={{ color: 'hsl(var(--danger))' }}>{k}:</span>
                        <span style={{ color: 'hsl(var(--foreground))' }}>{JSON.stringify(v)}</span>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="p-4 rounded-xl text-xs" style={{ backgroundColor: 'hsl(var(--danger-bg))', border: '1px solid hsl(var(--danger-border))' }}>
                    <span style={{ color: 'hsl(var(--danger))' }}>{t('support.nullRecordDeleted', 'null (record deleted)')}</span>
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* User agent */}
          <div className="card p-5">
            <div className="flex items-center gap-2 mb-3">
              <Monitor size={15} style={{ color: 'hsl(var(--primary))' }} />
              <h3 className="font-semibold" style={{ color: 'hsl(var(--foreground))' }}>{t('support.clientInformation', 'Client Information')}</h3>
            </div>
            <p className="text-xs font-mono p-3 rounded-lg" style={{ backgroundColor: 'hsl(var(--muted))', color: 'hsl(var(--foreground-secondary))' }}>
              {auditLog.userAgent}
            </p>
          </div>
        </div>

        {/* Right: Actor & Target */}
        <div className="space-y-5">
          <div className="card p-5">
            <div className="flex items-center gap-2 mb-4">
              <User size={15} style={{ color: 'hsl(var(--primary))' }} />
              <h3 className="font-semibold" style={{ color: 'hsl(var(--foreground))' }}>{t('support.actor', 'Actor')}</h3>
            </div>
            <div className="flex items-center gap-3 mb-3">
              <div className="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-bold" style={{ background: 'linear-gradient(135deg, hsl(var(--primary)), hsl(22, 89%, 36%))' }}>
                {auditLog.actor.name.split(' ').map(n => n[0]).join('')}
              </div>
              <div>
                <p className="font-semibold text-sm" style={{ color: 'hsl(var(--foreground))' }}>{auditLog.actor.name}</p>
                <p className="text-xs" style={{ color: 'hsl(var(--muted-foreground))' }}>{auditLog.actor.role}</p>
              </div>
            </div>
            <div className="space-y-1.5 text-xs">
              <div className="flex justify-between">
                <span style={{ color: 'hsl(var(--muted-foreground))' }}>{t('support.email', 'Email')}</span>
                <span className="font-medium" style={{ color: 'hsl(var(--foreground))' }}>{auditLog.actor.email}</span>
              </div>
              <div className="flex justify-between">
                <span style={{ color: 'hsl(var(--muted-foreground))' }}>{t('support.userId', 'User ID')}</span>
                <span className="font-mono" style={{ color: 'hsl(var(--foreground))' }}>{auditLog.actor.id}</span>
              </div>
            </div>
          </div>

          <div className="card p-5">
            <div className="flex items-center gap-2 mb-4">
              <Building2 size={15} style={{ color: 'hsl(var(--primary))' }} />
              <h3 className="font-semibold" style={{ color: 'hsl(var(--foreground))' }}>{t('support.target', 'Target')}</h3>
            </div>
            <div className="space-y-2 text-xs">
              {[
                { label: t('support.type', 'Type'), value: auditLog.target.type },
                { label: t('support.name', 'Name'), value: auditLog.target.name },
                { label: t('support.id', 'ID'), value: auditLog.target.id },
              ].map(item => (
                <div key={item.label} className="flex justify-between">
                  <span style={{ color: 'hsl(var(--muted-foreground))' }}>{item.label}</span>
                  <span className="font-medium font-mono" style={{ color: 'hsl(var(--foreground))' }}>{item.value}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="card p-5">
            <h3 className="font-semibold mb-3" style={{ color: 'hsl(var(--foreground))' }}>{t('support.actions', 'Actions')}</h3>
            <div className="space-y-2">
              <button className="btn-secondary w-full justify-start text-xs py-2">
                {t('support.exportAsJson', 'Export as JSON')}
              </button>
              <button className="btn-secondary w-full justify-start text-xs py-2">
                {t('support.viewRelatedEvents', 'View Related Events')}
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}