'use client';

import { useState } from 'react';

interface LoginLog {
  id: string;
  email: string;
  loginAt: Date;
  success: boolean;
  ipAddress: string | null;
  userAgent: string | null;
}

interface Props {
  logs: LoginLog[];
}

export default function CollapsibleLoginTable({ logs }: Props) {
  const [isExpanded, setIsExpanded] = useState(false);

  const recentLogs = logs.slice(0, 10);

  const parseUserAgent = (ua: string | null) => {
    if (!ua) return { browser: 'Unknown', device: 'Unknown' };

    let device = 'Unknown';
    if (ua.includes('Windows')) device = 'Windows';
    else if (ua.includes('Mac')) device = 'Mac';
    else if (ua.includes('Linux')) device = 'Linux';
    else if (ua.includes('iPhone')) device = 'iPhone';
    else if (ua.includes('Android')) device = 'Android';

    let browser = 'Unknown';
    if (ua.includes('Chrome')) browser = 'Chrome';
    else if (ua.includes('Safari')) browser = 'Safari';
    else if (ua.includes('Firefox')) browser = 'Firefox';
    else if (ua.includes('Edge')) browser = 'Edge';

    return { browser, device };
  };

  return (
    <div className="border border-line bg-surface rounded">
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        className="w-full flex items-center justify-between p-4 hover:bg-surface-1 transition-colors"
      >
        <span className="font-medium">
          {isExpanded ? '▼' : '▶'} Last 10 Login Attempts
        </span>
        <span className="text-sm text-muted">{recentLogs.length} entries</span>
      </button>

      {isExpanded && (
        <div className="border-t border-line overflow-x-auto">
          {recentLogs.length === 0 ? (
            <p className="p-4 text-sm text-muted">No login attempts recorded.</p>
          ) : (
            <table className="w-full border-collapse text-sm">
              <thead>
                <tr className="border-b border-line bg-surface-1">
                  <th className="text-left py-2 px-3 font-medium">Date & Time</th>
                  <th className="text-left py-2 px-3 font-medium">Email</th>
                  <th className="text-left py-2 px-3 font-medium">Status</th>
                  <th className="text-left py-2 px-3 font-medium">IP Address</th>
                  <th className="text-left py-2 px-3 font-medium">Browser / Device</th>
                </tr>
              </thead>
              <tbody>
                {recentLogs.map((log) => {
                  const { browser, device } = parseUserAgent(log.userAgent);
                  return (
                    <tr key={log.id} className="border-b border-line hover:bg-surface-1">
                      <td className="py-2 px-3 font-mono text-xs">
                        {new Date(log.loginAt).toLocaleDateString('en-GB', {
                          day: '2-digit',
                          month: 'short',
                          year: 'numeric',
                        })}{' '}
                        {new Date(log.loginAt).toLocaleTimeString('en-GB', {
                          hour: '2-digit',
                          minute: '2-digit',
                          second: '2-digit',
                        })}
                      </td>
                      <td className="py-2 px-3 text-xs">
                        <span className="break-all">{log.email}</span>
                      </td>
                      <td className="py-2 px-3">
                        <span
                          className={`tag-label rounded-full px-3 py-1 text-xs ${
                            log.success
                              ? 'bg-green-100 text-green-700'
                              : 'bg-splash-pink/10 text-splash-pink'
                          }`}
                        >
                          {log.success ? 'Success' : 'Failed'}
                        </span>
                      </td>
                      <td className="py-2 px-3 font-mono text-xs">{log.ipAddress || '—'}</td>
                      <td className="py-2 px-3 text-xs text-muted">
                        {browser} / {device}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
        </div>
      )}
    </div>
  );
}
