import React, { useState } from 'react';
import { Card } from '../../ui/card';
import { Button } from '../../ui/button';
import { SearchInput } from '../../ui/input';
import { Download, Filter, Smartphone, Monitor, Globe } from 'lucide-react';
import { useToast } from '../../../context/ToastContext';

interface LoginLog {
  id: string;
  date: string;
  time: string;
  ip: string;
  location: string;
  device: string;
  browser: string;
  status: 'Success' | 'Failed' | '2FA Challenge';
}

const MOCK_LOGS: LoginLog[] = [
  {
    id: '1',
    date: '2023-10-24',
    time: '14:30:22',
    ip: '203.0.113.45',
    location: 'Tokyo, JP',
    device: 'Desktop',
    browser: 'Chrome 118',
    status: 'Success',
  },
  {
    id: '2',
    date: '2023-10-24',
    time: '09:12:05',
    ip: '203.0.113.45',
    location: 'Tokyo, JP',
    device: 'Desktop',
    browser: 'Chrome 118',
    status: 'Success',
  },
  {
    id: '3',
    date: '2023-10-23',
    time: '18:45:00',
    ip: '198.51.100.23',
    location: 'Osaka, JP',
    device: 'Mobile',
    browser: 'Safari iOS',
    status: 'Success',
  },
  {
    id: '4',
    date: '2023-10-22',
    time: '03:15:12',
    ip: '192.0.2.1',
    location: 'London, UK',
    device: 'Desktop',
    browser: 'Firefox',
    status: 'Failed',
  },
  {
    id: '5',
    date: '2023-10-22',
    time: '03:15:45',
    ip: '192.0.2.1',
    location: 'London, UK',
    device: 'Desktop',
    browser: 'Firefox',
    status: '2FA Challenge',
  },
];

export const LoginHistory: React.FC = () => {
  const { addToast } = useToast();
  const [filter, setFilter] = useState('');
  const [logs] = useState<LoginLog[]>(MOCK_LOGS);

  const filteredLogs = logs.filter(
    (log) =>
      log.ip.includes(filter) ||
      log.location.toLowerCase().includes(filter.toLowerCase()),
  );

  const handleExport = () => {
    addToast('Exporting logs to CSV...', 'info');
    setTimeout(() => addToast('Download ready', 'success'), 1000);
  };

  return (
    <Card variant="default">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
        <div>
          <h3 className="text-xl font-bold text-white">Login History</h3>
          <p className="text-sm text-gray-400">
            Monitor access to your account.
          </p>
        </div>
        <div className="flex gap-2 w-full md:w-auto">
          <div className="flex-1 md:w-64">
            <SearchInput
              placeholder="Search IP or Location..."
              value={filter}
              onChange={(e) => setFilter(e.target.value)}
            />
          </div>
          <Button variant="ghost" icon={<Filter className="w-4 h-4" />}>
            Filter
          </Button>
          <Button
            variant="secondary"
            icon={<Download className="w-4 h-4" />}
            onClick={handleExport}
          >
            Export
          </Button>
        </div>
      </div>

      <div className="overflow-x-auto">
        <table className="w-full text-left border-collapse">
          <thead>
            <tr className="border-b border-kodo-steel text-gray-500 font-mono text-xs uppercase bg-kodo-ink/30">
              <th className="p-3">Status</th>
              <th className="p-3">Date & Time</th>
              <th className="p-3">Device Info</th>
              <th className="p-3">IP Address</th>
              <th className="p-3">Location</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-kodo-steel/30 text-sm">
            {filteredLogs.map((log) => (
              <tr key={log.id} className="hover:bg-white/5 transition-colors">
                <td className="p-3">
                  <span
                    className={`px-2 py-1 rounded text-[10px] font-bold uppercase border ${
                      log.status === 'Success'
                        ? 'border-kodo-lime/30 text-kodo-lime bg-kodo-lime/5'
                        : log.status === 'Failed'
                          ? 'border-kodo-red/30 text-kodo-red bg-kodo-red/5'
                          : 'border-kodo-gold/30 text-kodo-gold bg-kodo-gold/5'
                    }`}
                  >
                    {log.status}
                  </span>
                </td>
                <td className="p-3 text-white font-mono text-xs">
                  <div>{log.date}</div>
                  <div className="text-gray-500">{log.time}</div>
                </td>
                <td className="p-3">
                  <div className="flex items-center gap-2 text-gray-300">
                    {log.device === 'Mobile' ? (
                      <Smartphone className="w-4 h-4" />
                    ) : (
                      <Monitor className="w-4 h-4" />
                    )}
                    <span>{log.browser}</span>
                  </div>
                </td>
                <td className="p-3 text-kodo-cyan font-mono text-xs">
                  {log.ip}
                </td>
                <td className="p-3 text-gray-400">
                  <div className="flex items-center gap-1">
                    <Globe className="w-3 h-3" /> {log.location}
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Card>
  );
};
