import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { Plus, RefreshCw, Router, Wifi, Trash2, ChevronRight, Search, Radar, ArrowUpCircle } from 'lucide-react';
import { devicesApi, topologyApi } from '../services/api';
import type { Device } from '../types';
import type { DiscoveredDevice } from '../services/api';
import { useCanWrite } from '../hooks/useCanWrite';
import clsx from 'clsx';
import AddDeviceModal from '../components/devices/AddDeviceModal';

function StatusDot({ status }: { status: Device['status'] }) {
  return (
    <span
      className={clsx(
        'inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium',
        status === 'online' && 'status-online',
        status === 'offline' && 'status-offline',
        status === 'unknown' && 'status-unknown'
      )}
    >
      <span
        className={clsx(
          'w-1.5 h-1.5 rounded-full',
          status === 'online' && 'bg-green-500',
          status === 'offline' && 'bg-red-500',
          status === 'unknown' && 'bg-gray-400'
        )}
      />
      {status}
    </span>
  );
}

function DeviceTypeIcon({ type }: { type: Device['device_type'] }) {
  if (type === 'wireless_ap') return <Wifi className="w-5 h-5 text-blue-500" />;
  return <Router className="w-5 h-5 text-blue-500" />;
}

export default function DevicesPage() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const canWrite = useCanWrite();
  const [showAddModal, setShowAddModal] = useState(false);
  const [addPrefill, setAddPrefill] = useState<{ name?: string; ip_address?: string } | undefined>();
  const [search, setSearch] = useState('');
  const [deleteConfirm, setDeleteConfirm] = useState<number | null>(null);
  const [searching, setSearching] = useState(false);

  const { data: devices = [], isLoading } = useQuery({
    queryKey: ['devices'],
    queryFn: () => devicesApi.list().then((r) => r.data),
    refetchInterval: 30_000,
  });

  const { data: discovered = [] } = useQuery({
    queryKey: ['devices-discovered'],
    queryFn: () => devicesApi.discovered().then((r) => r.data),
    refetchInterval: 60_000,
  });

  const syncMutation = useMutation({
    mutationFn: (id: number) => devicesApi.sync(id),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['devices'] }),
  });

  const deleteMutation = useMutation({
    mutationFn: (id: number) => devicesApi.delete(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['devices'] });
      setDeleteConfirm(null);
    },
  });

  const filtered = devices.filter(
    (d) =>
      !search ||
      d.name.toLowerCase().includes(search.toLowerCase()) ||
      d.ip_address.includes(search) ||
      d.model?.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div className="space-y-4">
      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
        <h1 className="text-xl font-bold text-gray-900 dark:text-white">
          Devices
          {devices.length > 0 && (
            <span className="ml-2 text-sm font-normal text-gray-500 dark:text-slate-400">
              ({devices.filter((d) => d.status === 'online').length}/{devices.length} online)
            </span>
          )}
        </h1>
        {canWrite && (
          <div className="flex items-center gap-2 flex-shrink-0">
            <button
              onClick={async () => {
                setSearching(true);
                try {
                  await topologyApi.discover();
                  setTimeout(() => {
                    queryClient.invalidateQueries({ queryKey: ['devices-discovered'] });
                    setSearching(false);
                  }, 8000);
                } catch {
                  setSearching(false);
                }
              }}
              disabled={searching}
              className="btn-secondary flex items-center gap-2"
            >
              <RefreshCw className={clsx('w-4 h-4', searching && 'animate-spin')} />
              {searching ? 'Searching…' : 'Search for Devices'}
            </button>
            <button
              onClick={() => { setAddPrefill(undefined); setShowAddModal(true); }}
              className="btn-primary flex items-center gap-2"
            >
              <Plus className="w-4 h-4" />
              Add Device
            </button>
          </div>
        )}
      </div>

      {/* Search */}
      <div className="relative w-full sm:max-w-sm">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
        <input
          type="text"
          className="input pl-9"
          placeholder="Search devices..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
      </div>

      {/* Device list */}
      {isLoading ? (
        <div className="flex items-center justify-center h-48 text-gray-400">Loading...</div>
      ) : filtered.length === 0 ? (
        <div className="card p-12 flex flex-col items-center gap-4 text-center">
          <div className="w-16 h-16 bg-gray-100 dark:bg-slate-700 rounded-full flex items-center justify-center">
            <Router className="w-8 h-8 text-gray-400" />
          </div>
          <div>
            <p className="text-gray-700 dark:text-slate-300 font-medium">
              {search ? 'No devices match your search' : 'No devices added yet'}
            </p>
            <p className="text-sm text-gray-400 dark:text-slate-500 mt-1">
              {!search && 'Click "Add Device" to connect your first Mikrotik device'}
            </p>
          </div>
        </div>
      ) : (
        <div className="card overflow-hidden">
          <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-gray-200 dark:border-slate-700">
                <th className="table-header px-4 py-3">Device</th>
                <th className="table-header px-4 py-3">IP Address</th>
                <th className="table-header px-4 py-3">Model</th>
                <th className="table-header px-4 py-3">ROS Version</th>
                <th className="table-header px-4 py-3">Status</th>
                <th className="table-header px-4 py-3">Last Seen</th>
                <th className="table-header px-4 py-3 w-28">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-100 dark:divide-slate-700 table-zebra">
              {filtered.map((device) => (
                <tr
                  key={device.id}
                  className="hover:bg-gray-50 dark:hover:bg-slate-700/50 cursor-pointer transition-colors"
                  onClick={() => navigate(`/devices/${device.id}`)}
                >
                  <td className="px-4 py-3">
                    <div className="flex items-center gap-3">
                      <DeviceTypeIcon type={device.device_type} />
                      <div>
                        <div className="text-sm font-medium text-gray-900 dark:text-white">
                          {device.name}
                        </div>
                        <div className="text-xs text-gray-400 dark:text-slate-500">
                          {{ router: 'Router', switch: 'Switch', wireless_ap: 'Wireless AP', other: 'Other' }[device.device_type] ?? device.device_type}
                        </div>
                      </div>
                    </div>
                  </td>
                  <td className="px-4 py-3 text-sm font-mono text-gray-600 dark:text-slate-400">
                    {device.ip_address}
                  </td>
                  <td className="px-4 py-3 text-sm text-gray-600 dark:text-slate-400">
                    {device.model || '—'}
                  </td>
                  <td className="px-4 py-3 text-sm text-gray-600 dark:text-slate-400">
                    <span className="flex items-center gap-1.5">
                      {device.ros_version || '—'}
                      {device.firmware_update_available && (
                        <span
                          title={device.latest_ros_version ? `Update available: ${device.latest_ros_version}` : 'Firmware update available'}
                          className="flex-shrink-0"
                        >
                          <ArrowUpCircle className="w-3.5 h-3.5 text-amber-500" />
                        </span>
                      )}
                    </span>
                  </td>
                  <td className="px-4 py-3">
                    <StatusDot status={device.status} />
                  </td>
                  <td className="px-4 py-3 text-sm text-gray-400 dark:text-slate-500">
                    {device.last_seen
                      ? new Date(device.last_seen).toLocaleString()
                      : '—'}
                  </td>
                  <td className="px-4 py-3">
                    <div
                      className="flex items-center gap-1"
                      onClick={(e) => e.stopPropagation()}
                    >
                      {canWrite && (
                        <>
                          <button
                            onClick={() => syncMutation.mutate(device.id)}
                            disabled={syncMutation.isPending}
                            className="p-1.5 rounded text-gray-400 hover:text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors"
                            title="Sync now"
                          >
                            <RefreshCw
                              className={clsx('w-3.5 h-3.5', syncMutation.isPending && 'animate-spin')}
                            />
                          </button>
                          {deleteConfirm === device.id ? (
                            <div className="flex items-center gap-1">
                              <button
                                onClick={() => deleteMutation.mutate(device.id)}
                                className="text-xs text-red-500 hover:text-red-600 font-medium px-1"
                              >
                                Confirm
                              </button>
                              <button
                                onClick={() => setDeleteConfirm(null)}
                                className="text-xs text-gray-400 hover:text-gray-600 px-1"
                              >
                                Cancel
                              </button>
                            </div>
                          ) : (
                            <button
                              onClick={() => setDeleteConfirm(device.id)}
                              className="p-1.5 rounded text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
                              title="Delete device"
                            >
                              <Trash2 className="w-3.5 h-3.5" />
                            </button>
                          )}
                        </>
                      )}
                      <ChevronRight className="w-4 h-4 text-gray-300 dark:text-slate-600" />
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          </div>
        </div>
      )}

      {/* Discovered (unmanaged) MikroTik neighbors */}
      {discovered.length > 0 && (
        <div className="space-y-3">
          <div className="flex items-center gap-2">
            <Radar className="w-4 h-4 text-amber-500" />
            <h2 className="text-sm font-semibold text-gray-700 dark:text-slate-300">
              Discovered Devices
            </h2>
            <span className="text-xs text-gray-400 dark:text-slate-500">
              — Mikrotik neighbors seen by your managed devices, not yet added to management
            </span>
          </div>
          <div className="card overflow-hidden">
            <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-700/50">
                  <th className="table-header px-4 py-2.5 text-left">Identity</th>
                  <th className="table-header px-4 py-2.5 text-left">IP Address</th>
                  <th className="table-header px-4 py-2.5 text-left">MAC Address</th>
                  <th className="table-header px-4 py-2.5 text-left">Seen By</th>
                  <th className="table-header px-4 py-2.5 text-left">Last Seen</th>
                  <th className="table-header px-4 py-2.5 w-36" />
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100 dark:divide-slate-700 table-zebra">
                {(discovered as DiscoveredDevice[]).map((d, i) => (
                  <tr key={d.mac_address || d.address || i} className="hover:bg-amber-50/50 dark:hover:bg-amber-900/10">
                    <td className="px-4 py-2.5 font-medium text-gray-900 dark:text-white">
                      {d.identity || '—'}
                    </td>
                    <td className="px-4 py-2.5 font-mono text-gray-600 dark:text-slate-400">
                      {d.address ? (
                        d.address
                      ) : (
                        <span className="text-amber-500 dark:text-amber-400 italic text-xs font-sans">
                          Not detected — enter manually
                        </span>
                      )}
                    </td>
                    <td className="px-4 py-2.5 font-mono text-xs text-gray-500 dark:text-slate-500">
                      {d.mac_address || '—'}
                    </td>
                    <td className="px-4 py-2.5 text-gray-500 dark:text-slate-400 text-xs">
                      {d.seen_by}
                    </td>
                    <td className="px-4 py-2.5 text-gray-400 dark:text-slate-500 text-xs">
                      {new Date(d.discovered_at).toLocaleString()}
                    </td>
                    <td className="px-4 py-2.5">
                      {canWrite && (
                        <button
                          onClick={() => {
                            setAddPrefill({ name: d.identity || '', ip_address: d.address });
                            setShowAddModal(true);
                          }}
                          className="btn-primary text-xs py-1 px-3 flex items-center gap-1"
                        >
                          <Plus className="w-3 h-3" />
                          Add to Manager
                        </button>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            </div>
          </div>
        </div>
      )}

      {showAddModal && (
        <AddDeviceModal
          prefill={addPrefill}
          onClose={() => setShowAddModal(false)}
          onSuccess={() => {
            setShowAddModal(false);
            queryClient.invalidateQueries({ queryKey: ['devices'] });
            queryClient.invalidateQueries({ queryKey: ['devices-discovered'] });
          }}
        />
      )}
    </div>
  );
}