import { PageHeader, StatusBadge } from '@ema-platform/ui';
import { type StatusTone } from '@ema-platform/shared';
import { useState } from 'react';
import { useApiQuery } from '@ema-platform/api';
import {ActionIcon, Avatar, Badge, Button, Card, Collapse, Divider, Group, Modal, Paper, Select, SimpleGrid, Stack, Table, Text, TextInput, ThemeIcon, rem} from '@mantine/core';
import {
  IconBook2,
  IconCertificate,
  IconChevronDown,
  IconChevronUp,
  IconEye,
  IconHeart,
  IconId,
  IconSearch,
  IconShieldCheck,
  IconUser,
  IconUsers,
  IconX,
} from '@tabler/icons-react';

// ---------------------------------------------------------------------------
// Mock data
// ---------------------------------------------------------------------------
interface Seafarer {
  id: string;
  name: string;
  nationality: string;
  dob: string;
  rank: string;
  seamanBookNo: string;
  seamanBookExpiry: string;
  btcNo: string | null;
  bsidNo: string | null;
  medicalExpiry: string;
  medicalStatus: 'Valid' | 'Expiring' | 'Expired';
  cocCerts: { type: string; no: string; expiry: string }[];
  status: 'Active' | 'Inactive' | 'Suspended';
}


const RANK_OPTIONS = ['All', 'Master', 'Chief Engineer', 'Officer of the Watch', 'Able Seaman', 'Deck Rating'];
const STATUS_OPTIONS = ['All', 'Active', 'Inactive', 'Suspended'];
const MEDICAL_OPTIONS = ['All', 'Valid', 'Expiring', 'Expired'];

const MEDICAL_COLOR: Record<string, string> = { Valid: 'teal', Expiring: 'orange', Expired: 'red' };
const STATUS_TONE: Record<string, StatusTone> = { Active: 'success', Inactive: 'neutral', Suspended: 'danger' };

// ---------------------------------------------------------------------------
// Detail modal
// ---------------------------------------------------------------------------
function Stat({ label, value }: { label: string; value: React.ReactNode }) {
  return (
    <div>
      <Text fz={10} fw={700} tt="uppercase" c="dimmed" lh={1.2} mb={3}>{label}</Text>
      <Text fz="sm" fw={600}>{value ?? '—'}</Text>
    </div>
  );
}

function DetailModal({ sf, opened, onClose }: { sf: Seafarer | null; opened: boolean; onClose: () => void }) {
  if (!sf) return null;
  const initials = sf.name.split(' ').filter(Boolean).slice(0, 2).map((p) => p[0]).join('').toUpperCase();
  return (
    <Modal opened={opened} onClose={onClose} size="xl" radius="lg" padding={0} withCloseButton={false}>
      <Stack gap={0}>
        {/* Header */}
        <Group justify="space-between" wrap="nowrap" p="lg" style={{ borderBottom: '1px solid var(--mantine-color-default-border)' }}>
          <Group gap="md" wrap="nowrap">
            <Avatar size={52} radius="xl" color="blue" style={{ fontSize: rem(18) }}>{initials}</Avatar>
            <div>
              <Text fw={700} fz="lg" lh={1.2}>{sf.name}</Text>
              <Group gap={6} mt={4}>
                <Text fz="xs" c="dimmed" ff="monospace">{sf.id}</Text>
                <Text fz="xs" c="dimmed">·</Text>
                <Text fz="xs" c="dimmed">{sf.rank}</Text>
              </Group>
            </div>
          </Group>
          <Group gap="xs">
            <StatusBadge tone={STATUS_TONE[sf.status]} label={sf.status} variant="light" />
            <ActionIcon variant="subtle" color="gray" onClick={onClose}><IconX size={16} /></ActionIcon>
          </Group>
        </Group>

        <Stack gap="lg" p="lg">
          <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="lg">
            <Stat label="Nationality" value={sf.nationality} />
            <Stat label="Date of Birth" value={sf.dob} />
            <Stat label="Seaman Book №" value={sf.seamanBookNo} />
            <Stat label="SB Expiry" value={sf.seamanBookExpiry} />
            <Stat label="BTC №" value={sf.btcNo ?? <Badge color="red" variant="light" size="xs">Missing</Badge>} />
            <Stat label="BSID №" value={sf.bsidNo ?? <Badge color="red" variant="light" size="xs">Missing</Badge>} />
            <Stat label="Medical" value={<Badge color={MEDICAL_COLOR[sf.medicalStatus]} variant="light" size="sm">{sf.medicalStatus}</Badge>} />
            <Stat label="Medical Expiry" value={sf.medicalExpiry} />
          </SimpleGrid>

          {sf.cocCerts.length > 0 && (
            <Paper withBorder radius="md" p="md">
              <Text fz="xs" fw={700} c="dimmed" mb="sm" tt="uppercase">CoC / CoP Certificates</Text>
              <Stack gap="xs">
                {sf.cocCerts.map((c) => (
                  <Group key={c.no} justify="space-between" wrap="nowrap" p="xs" style={{ borderRadius: 8, background: 'var(--mantine-color-default-hover)' }}>
                    <Group gap="xs" wrap="nowrap">
                      <ThemeIcon variant="light" color="violet" size={30} radius="md"><IconCertificate size={15} /></ThemeIcon>
                      <div>
                        <Text fz="sm" fw={600}>{c.type}</Text>
                        <Text fz="xs" c="dimmed" ff="monospace">{c.no}</Text>
                      </div>
                    </Group>
                    <Text fz="xs" c="dimmed">Expires {c.expiry}</Text>
                  </Group>
                ))}
              </Stack>
            </Paper>
          )}
        </Stack>
      </Stack>
    </Modal>
  );
}

// ---------------------------------------------------------------------------
// Main page
// ---------------------------------------------------------------------------
export function SeafarerRegistryPage() {
  // The register is served whole and filtered in the browser: the filters are
  // instant facets over a page-sized list, and a round trip per keystroke
  // would make the search feel slower than the data it is searching.
  const { data } = useApiQuery<{ total: number; items: Seafarer[] }>({
    url: '/seafarer-registry',
    method: 'GET',
  });
  const seafarers = data?.items ?? [];

  const [search, setSearch] = useState('');
  const [rankFilter, setRankFilter] = useState('All');
  const [statusFilter, setStatusFilter] = useState('All');
  const [medicalFilter, setMedicalFilter] = useState('All');
  const [selected, setSelected] = useState<Seafarer | null>(null);
  const [filtersOpen, setFiltersOpen] = useState(true);

  const filtered = seafarers.filter((sf) => {
    const q = search.toLowerCase();
    const matchSearch = !q || sf.name.toLowerCase().includes(q) || sf.id.toLowerCase().includes(q) || sf.seamanBookNo.toLowerCase().includes(q);
    const matchRank   = rankFilter === 'All' || sf.rank === rankFilter;
    const matchStatus = statusFilter === 'All' || sf.status === statusFilter;
    const matchMed    = medicalFilter === 'All' || sf.medicalStatus === medicalFilter;
    return matchSearch && matchRank && matchStatus && matchMed;
  });

  const KPI = [
    { label: 'Total Seafarers', value: seafarers.length, color: 'blue',   icon: IconUsers },
    { label: 'Active',          value: seafarers.filter((s) => s.status === 'Active').length, color: 'teal', icon: IconUser },
    { label: 'Medical Expiring',value: seafarers.filter((s) => s.medicalStatus === 'Expiring').length, color: 'orange', icon: IconHeart },
    { label: 'Medical Expired', value: seafarers.filter((s) => s.medicalStatus === 'Expired').length,  color: 'red',    icon: IconHeart },
    { label: 'With CoC',        value: seafarers.filter((s) => s.cocCerts.length > 0).length, color: 'violet', icon: IconShieldCheck },
    { label: 'Without BSID',    value: seafarers.filter((s) => !s.bsidNo).length, color: 'yellow', icon: IconId },
  ];

  return (
    <Stack gap="md">
      <PageHeader
        title="Seafarer Registry"
        subtitle="Search and view all registered seafarers, their documents, and certificate status"
        noMargin
      />

      {/* KPIs */}
      <SimpleGrid cols={{ base: 3, sm: 6 }} spacing="sm">
        {KPI.map((k) => {
          const KIcon = k.icon;
          return (
            <Card key={k.label} withBorder radius="md" p="sm">
              <Group gap="xs" wrap="nowrap">
                <ThemeIcon size={28} radius="sm" color={k.color} variant="light"><KIcon size={14} /></ThemeIcon>
                <div style={{ minWidth: 0 }}>
                  <Text fz="lg" fw={800} lh={1}>{k.value}</Text>
                  <Text fz="xs" c="dimmed" lh={1.2} style={{ lineHeight: 1.2 }}>{k.label}</Text>
                </div>
              </Group>
            </Card>
          );
        })}
      </SimpleGrid>

      {/* Search + filters */}
      <Paper withBorder radius="lg" p={{ base: 'md', sm: 'xl' }}>
        <Group mb="sm" gap="sm" justify="space-between">
          <TextInput
            placeholder="Search by name, seafarer ID, or seaman book…"
            leftSection={<IconSearch size={14} />}
            value={search}
            onChange={(e) => setSearch(e.currentTarget.value)}
            style={{ flex: 1, minWidth: 200 }}
            size="sm"
          />
          <Button
            variant="subtle"
            size="xs"
            rightSection={filtersOpen ? <IconChevronUp size={12} /> : <IconChevronDown size={12} />}
            onClick={() => setFiltersOpen((o) => !o)}
          >
            Filters
          </Button>
        </Group>

        <Collapse in={filtersOpen}>
          <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="sm" mb="md">
            <Select label="Rank" data={RANK_OPTIONS} value={rankFilter} onChange={(v) => setRankFilter(v ?? 'All')} size="sm" />
            <Select label="Status" data={STATUS_OPTIONS} value={statusFilter} onChange={(v) => setStatusFilter(v ?? 'All')} size="sm" />
            <Select label="Medical Status" data={MEDICAL_OPTIONS} value={medicalFilter} onChange={(v) => setMedicalFilter(v ?? 'All')} size="sm" />
          </SimpleGrid>
          <Divider mb="md" />
        </Collapse>

        <Text fz="xs" c="dimmed" mb="sm">{filtered.length} seafarer(s) found</Text>

        <Table.ScrollContainer minWidth={1100}>
        <Table highlightOnHover fz="sm" verticalSpacing="sm">
          <Table.Thead bg="var(--mantine-color-default-hover)">
            <Table.Tr>
              {['Seafarer ID', 'Name', 'Rank', 'Seaman Book', 'BTC', 'BSID', 'Medical', 'CoC/CoP', 'Status', ''].map((h) => (
                <Table.Th key={h} style={{ fontSize: rem(11), textTransform: 'uppercase', color: 'var(--mantine-color-dimmed)' }}>{h}</Table.Th>
              ))}
            </Table.Tr>
          </Table.Thead>
          <Table.Tbody>
            {filtered.map((sf) => (
              <Table.Tr key={sf.id}>
                <Table.Td><Text fz="xs" fw={600} c="blue.7">{sf.id}</Text></Table.Td>
                <Table.Td><Text fz="xs" fw={600}>{sf.name}</Text><Text fz="xs" c="dimmed">{sf.dob}</Text></Table.Td>
                <Table.Td><Text fz="xs">{sf.rank}</Text></Table.Td>
                <Table.Td>
                  <Group gap={4}>
                    <IconBook2 size={11} color="var(--mantine-color-blue-6)" />
                    <Text fz="xs">{sf.seamanBookNo}</Text>
                  </Group>
                </Table.Td>
                <Table.Td>
                  {sf.btcNo
                    ? <Group gap={4}><IconCertificate size={11} color="var(--mantine-color-teal-6)" /><Text fz="xs">{sf.btcNo}</Text></Group>
                    : <Badge color="red" variant="light" size="xs">Missing</Badge>}
                </Table.Td>
                <Table.Td>
                  {sf.bsidNo
                    ? <Group gap={4}><IconId size={11} color="var(--mantine-color-violet-6)" /><Text fz="xs">{sf.bsidNo}</Text></Group>
                    : <Badge color="red" variant="light" size="xs">Missing</Badge>}
                </Table.Td>
                <Table.Td>
                  <Badge color={MEDICAL_COLOR[sf.medicalStatus]} variant="light" size="xs">{sf.medicalStatus}</Badge>
                  <Text fz="xs" c="dimmed">{sf.medicalExpiry}</Text>
                </Table.Td>
                <Table.Td>
                  {sf.cocCerts.length > 0
                    ? <Badge color="violet" variant="light" size="xs">{sf.cocCerts.length} cert(s)</Badge>
                    : <Text fz="xs" c="dimmed">—</Text>}
                </Table.Td>
                <Table.Td>
                  <StatusBadge
                    tone={STATUS_TONE[sf.status]}
                    label={sf.status}
                    variant="light"
                    size="xs"
                  />
                </Table.Td>
                <Table.Td>
                  <ActionIcon variant="light" color="blue" size="sm" onClick={() => setSelected(sf)}>
                    <IconEye size={13} />
                  </ActionIcon>
                </Table.Td>
              </Table.Tr>
            ))}
            {filtered.length === 0 && (
              <Table.Tr>
                <Table.Td colSpan={10} style={{ textAlign: 'center', padding: '2rem' }}>
                  <Text c="dimmed" fz="sm">No seafarers match your search.</Text>
                </Table.Td>
              </Table.Tr>
            )}
          </Table.Tbody>
        </Table>
        </Table.ScrollContainer>
      </Paper>

      <DetailModal sf={selected} opened={!!selected} onClose={() => setSelected(null)} />
    </Stack>
  );
}
