import { useState, useEffect, useMemo } from 'react';
import {
  Accordion,
  AccordionSummary,
  AccordionDetails,
  Box,
  IconButton,
  Tab,
  Tabs,
  Tooltip,
  Typography,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  Chip,
  Button,
  Checkbox,
  FormControlLabel,
  FormGroup,
  LinearProgress,
  Divider,
  TextField,
  MenuItem,
} from '@mui/material';
import { Add as AddIcon, ExpandMore as ExpandMoreIcon, FilterList as FilterListIcon, PictureAsPdf as PdfIcon } from '@mui/icons-material';
import { useQuery } from '@tanstack/react-query';
import { useNavigate, useSearchParams } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import ChatAwareFab from '../components/shared/ChatAwareFab';
import { KatalogTab } from '../components/shared/KatalogTab';
import { usePermissionContext } from '../contexts/PermissionContext';
import { bestellungApi } from '../services/bestellung';
import { configApi } from '../services/config';
import { addPdfHeader, addPdfFooter } from '../utils/pdfExport';
import { BESTELLUNG_STATUS_LABELS, BESTELLUNG_STATUS_COLORS } from '../types/bestellung.types';
import type { BestellungStatus, Bestellung } from '../types/bestellung.types';

// ── Helpers ──

const formatCurrency = (value?: number) =>
  value != null ? new Intl.NumberFormat('de-AT', { style: 'currency', currency: 'EUR' }).format(value) : '–';

const formatDate = (iso?: string) =>
  iso ? new Date(iso).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' }) : '–';

// ── Tab Panel ──

interface TabPanelProps { children: React.ReactNode; index: number; value: number }
function TabPanel({ children, value, index }: TabPanelProps) {
  if (value !== index) return null;
  return <Box sx={{ pt: 3 }}>{children}</Box>;
}

const TAB_COUNT = 3;

// ── Status options ──

const ALL_STATUSES: BestellungStatus[] = ['entwurf', 'wartet_auf_genehmigung', 'bereit_zur_bestellung', 'bestellt', 'teillieferung', 'lieferung_pruefen', 'abgeschlossen'];
const DEFAULT_EXCLUDED_STATUSES: BestellungStatus[] = ['abgeschlossen'];

// ── Kennung formatter ──

function formatKennung(o: Bestellung): string {
  if (o.laufende_nummer == null) return '–';
  const year = new Date(o.erstellt_am).getFullYear();
  return `${year}/${o.laufende_nummer}`;
}

// ── Brutto calculator ──

function calcBrutto(o: Bestellung): number | undefined {
  if (o.total_cost == null) return undefined;
  const rate = (parseFloat(String(o.steuersatz)) || 20) / 100;
  return o.total_cost * (1 + rate);
}

// ══════════════════════════════════════════════════════════════════════════════
// Component
// ══════════════════════════════════════════════════════════════════════════════

export default function Bestellungen() {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const { hasPermission } = usePermissionContext();
  const canManageVendors = hasPermission('bestellungen:manage_vendors');
  const canExport = hasPermission('bestellungen:export');

  // Tab from URL
  const [tab, setTab] = useState(() => {
    const t = Number(searchParams.get('tab'));
    return t >= 0 && t < TAB_COUNT ? t : 0;
  });
  useEffect(() => {
    const t = Number(searchParams.get('tab'));
    if (t >= 0 && t < TAB_COUNT) setTab(t);
  }, [searchParams]);

  // ── Filter state ──
  const [selectedVendors, setSelectedVendors] = useState<Set<string> | null>(null); // null = all
  const [selectedStatuses, setSelectedStatuses] = useState<Set<BestellungStatus>>(
    () => new Set(ALL_STATUSES.filter((s) => !DEFAULT_EXCLUDED_STATUSES.includes(s)))
  );

  // ── Queries ──
  const { data: orders = [], isLoading: ordersLoading } = useQuery({
    queryKey: ['bestellungen'],
    queryFn: () => bestellungApi.getOrders(),
  });

  const { data: vendors = [], isLoading: vendorsLoading } = useQuery({
    queryKey: ['lieferanten'],
    queryFn: bestellungApi.getVendors,
  });

  // ── Derive unique filter values from data ──
  const uniqueVendors = useMemo(() => {
    const map = new Map<string, string>();
    orders.forEach((o) => {
      if (o.lieferant_name) map.set(String(o.lieferant_id ?? o.lieferant_name), o.lieferant_name);
    });
    return Array.from(map.entries()).sort((a, b) => a[1].localeCompare(b[1]));
  }, [orders]);

  // ── Filtered orders ──
  const filteredOrders = useMemo(() => {
    return orders.filter((o) => {
      // Status filter
      if (!selectedStatuses.has(o.status)) return false;
      // Vendor filter (null = all selected)
      if (selectedVendors !== null) {
        const key = String(o.lieferant_id ?? o.lieferant_name ?? '');
        if (!selectedVendors.has(key)) return false;
      }
      return true;
    });
  }, [orders, selectedStatuses, selectedVendors]);

  // ── Active filter count ──
  const activeFilterCount = useMemo(() => {
    let count = 0;
    if (selectedStatuses.size !== ALL_STATUSES.length - DEFAULT_EXCLUDED_STATUSES.length) count++;
    if (selectedVendors !== null) count++;
    return count;
  }, [selectedStatuses, selectedVendors]);

  // ── Filter handlers ──
  function resetFilters() {
    setSelectedVendors(null);
    setSelectedStatuses(new Set(ALL_STATUSES.filter((s) => !DEFAULT_EXCLUDED_STATUSES.includes(s))));
  }

  function toggleStatus(s: BestellungStatus) {
    setSelectedStatuses((prev) => {
      const next = new Set(prev);
      if (next.has(s)) next.delete(s);
      else next.add(s);
      return next;
    });
  }

  function toggleVendor(key: string) {
    setSelectedVendors((prev) => {
      if (prev === null) {
        // was "all selected" → deselect this one
        const allKeys = new Set(uniqueVendors.map(([k]) => k));
        allKeys.delete(key);
        return allKeys;
      }
      const next = new Set(prev);
      if (next.has(key)) next.delete(key);
      else next.add(key);
      // if all are selected again, go back to null
      if (next.size === uniqueVendors.length) return null;
      return next;
    });
  }

  function isVendorSelected(key: string) {
    return selectedVendors === null || selectedVendors.has(key);
  }

  // ── PDF Export ──
  async function generateBestellungenPdf() {
    const { jsPDF } = await import('jspdf');
    const autoTable = (await import('jspdf-autotable')).default;
    const doc = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });

    let settings;
    try { settings = await configApi.getPdfSettings(); } catch { settings = { pdf_header: '', pdf_footer: '', pdf_logo: '', pdf_org_name: '' }; }

    let startY = await addPdfHeader(doc, settings, 210);

    // Document title below header
    doc.setFontSize(14);
    doc.setFont('helvetica', 'bold');
    doc.text('Bestellungen — Übersicht', 10, startY);
    startY += 10;

    const rows = filteredOrders.map((o) => {
      const brutto = calcBrutto(o);
      return [
        formatKennung(o),
        o.lieferant_name || '–',
        BESTELLUNG_STATUS_LABELS[o.status],
        String(o.items_count ?? 0),
        formatCurrency(brutto),
        formatDate(o.bestellt_am || o.erstellt_am),
      ];
    });

    autoTable(doc, {
      head: [['Kennung', 'Lieferant', 'Status', 'Pos.', 'Betrag (brutto)', 'Datum']],
      body: rows,
      startY,
      headStyles: { fillColor: [66, 66, 66], textColor: 255, fontStyle: 'bold' },
      alternateRowStyles: { fillColor: [245, 245, 245] },
      margin: { left: 10, right: 10 },
      styles: { fontSize: 9, cellPadding: 2 },
      columnStyles: {
        0: { cellWidth: 22 },
        1: { cellWidth: 40 },
        2: { cellWidth: 30 },
        3: { cellWidth: 15, halign: 'right' },
        4: { cellWidth: 35, halign: 'right' },
        5: { cellWidth: 25 },
      },
      didDrawPage: addPdfFooter(doc, settings),
    });

    const today = new Date().toISOString().slice(0, 10);
    doc.save(`bestellungen_uebersicht_${today}.pdf`);
  }

  // ── Render ──

  return (
    <DashboardLayout>
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
        <Typography variant="h4" sx={{ flexGrow: 1 }}>Bestellungen</Typography>
        {canExport && (
          <Tooltip title="PDF Export">
            <IconButton onClick={generateBestellungenPdf} color="primary">
              <PdfIcon />
            </IconButton>
          </Tooltip>
        )}
      </Box>

      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
        <Tabs value={tab} onChange={(_e, v) => { setTab(v); navigate(`/bestellungen?tab=${v}`, { replace: true }); }} variant="scrollable" scrollButtons="auto">
          <Tab label="Bestellungen" />
          {canManageVendors && <Tab label="Lieferanten" />}
          <Tab label="Katalog" />
        </Tabs>
      </Box>

      {/* ── Tab 0: Orders ── */}
      <TabPanel value={tab} index={0}>
        {/* ── Summary Cards ── */}
        <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 2, mb: 3 }}>
          {[
            { label: 'Wartet auf Genehmigung', count: orders.filter(o => o.status === 'wartet_auf_genehmigung').length, color: 'warning.main' },
            { label: 'Bereit zur Bestellung', count: orders.filter(o => o.status === 'bereit_zur_bestellung').length, color: 'info.main' },
            { label: 'Bestellt', count: orders.filter(o => o.status === 'bestellt').length, color: 'primary.main' },
            { label: 'Lieferung prüfen', count: orders.filter(o => o.status === 'lieferung_pruefen').length, color: 'secondary.main' },
          ].map(({ label, count, color }) => (
            <Paper variant="outlined" key={label} sx={{ p: 2, textAlign: 'center' }}>
              <Typography variant="h4" sx={{ color, fontWeight: 700 }}>{count}</Typography>
              <Typography variant="body2" color="text.secondary">{label}</Typography>
            </Paper>
          ))}
        </Box>

        {/* ── Filter ── */}
        <Accordion defaultExpanded={false} disableGutters sx={{ mb: 2, '&:before': { display: 'none' }, border: 1, borderColor: 'divider', borderRadius: 1 }}>
          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
              <FilterListIcon fontSize="small" />
              <Typography variant="body2">Filter</Typography>
              {activeFilterCount > 0 && (
                <Chip label={activeFilterCount} size="small" color="primary" sx={{ height: 18, fontSize: '0.7rem' }} />
              )}
            </Box>
          </AccordionSummary>
          <AccordionDetails>
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              {/* Status */}
              <Box>
                <Typography variant="subtitle2" sx={{ mb: 0.5 }}>Status</Typography>
                <FormGroup row>
                  {ALL_STATUSES.map((s) => (
                    <FormControlLabel
                      key={s}
                      control={<Checkbox size="small" checked={selectedStatuses.has(s)} onChange={() => toggleStatus(s)} />}
                      label={BESTELLUNG_STATUS_LABELS[s]}
                    />
                  ))}
                </FormGroup>
              </Box>
              <Divider />
              {/* Vendor */}
              {uniqueVendors.length > 0 && (
                <Box>
                  <Typography variant="subtitle2" sx={{ mb: 0.5 }}>Lieferant</Typography>
                  <FormGroup>
                    {uniqueVendors.map(([key, label]) => (
                      <FormControlLabel
                        key={key}
                        control={<Checkbox size="small" checked={isVendorSelected(key)} onChange={() => toggleVendor(key)} />}
                        label={label}
                      />
                    ))}
                  </FormGroup>
                </Box>
              )}
              <Divider />
              <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
                <Button size="small" onClick={resetFilters}>Zurücksetzen</Button>
              </Box>
            </Box>
          </AccordionDetails>
        </Accordion>

        {/* Active filter info */}
        <Box sx={{ mb: 2, display: 'flex', gap: 2, alignItems: 'center' }}>
          {activeFilterCount > 0 && (
            <Button size="small" onClick={resetFilters}>Zurücksetzen</Button>
          )}
          <Typography variant="body2" color="text.secondary">
            {filteredOrders.length} von {orders.length} Bestellungen
          </Typography>
        </Box>

        <TableContainer component={Paper}>
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell>Kennung</TableCell>
                <TableCell>Bezeichnung</TableCell>
                <TableCell>Lieferant</TableCell>
                <TableCell>Besteller</TableCell>
                <TableCell>Status</TableCell>
                <TableCell align="right">Positionen</TableCell>
                <TableCell align="right">Gesamtpreis (brutto)</TableCell>
                <TableCell>Lieferung</TableCell>
                <TableCell>Erstellt am</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {ordersLoading ? (
                <TableRow><TableCell colSpan={9} align="center">Laden...</TableCell></TableRow>
              ) : filteredOrders.length === 0 ? (
                <TableRow><TableCell colSpan={9} align="center">Keine Bestellungen vorhanden</TableCell></TableRow>
              ) : (
                filteredOrders.map((o) => {
                  const brutto = calcBrutto(o);
                  const totalOrdered = o.total_ordered ?? 0;
                  const totalReceived = o.total_received ?? 0;
                  const deliveryPct = totalOrdered > 0 ? (totalReceived / totalOrdered) * 100 : 0;
                  return (
                    <TableRow
                      key={o.id}
                      hover
                      sx={{ cursor: 'pointer' }}
                      onClick={() => navigate(`/bestellungen/${o.id}`)}
                    >
                      <TableCell sx={{ whiteSpace: 'nowrap', fontFamily: 'monospace', fontSize: '0.85rem' }}>
                        {formatKennung(o)}
                      </TableCell>
                      <TableCell>{o.bezeichnung}</TableCell>
                      <TableCell>{o.lieferant_name || '–'}</TableCell>
                      <TableCell>{o.besteller_name || '–'}</TableCell>
                      <TableCell>
                        <Chip
                          label={BESTELLUNG_STATUS_LABELS[o.status]}
                          color={BESTELLUNG_STATUS_COLORS[o.status]}
                          size="small"
                        />
                      </TableCell>
                      <TableCell align="right">{o.items_count ?? 0}</TableCell>
                      <TableCell align="right">{formatCurrency(brutto)}</TableCell>
                      <TableCell sx={{ minWidth: 100 }}>
                        {totalOrdered > 0 ? (
                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                            <LinearProgress
                              variant="determinate"
                              value={Math.min(deliveryPct, 100)}
                              color={deliveryPct >= 100 ? 'success' : 'primary'}
                              sx={{ flexGrow: 1, height: 6, borderRadius: 3 }}
                            />
                            <Typography variant="caption" sx={{ whiteSpace: 'nowrap' }}>
                              {totalReceived}/{totalOrdered}
                            </Typography>
                          </Box>
                        ) : '–'}
                      </TableCell>
                      <TableCell>{formatDate(o.erstellt_am)}</TableCell>
                    </TableRow>
                  );
                })
              )}
            </TableBody>
          </Table>
        </TableContainer>

        {hasPermission('bestellungen:create') && (
          <ChatAwareFab onClick={() => navigate('/bestellungen/neu')} aria-label="Neue Bestellung">
            <AddIcon />
          </ChatAwareFab>
        )}
      </TabPanel>

      {/* ── Tab 1: Vendors ── */}
      {canManageVendors && (
      <TabPanel value={tab} index={1}>
        <TableContainer component={Paper}>
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell>Name</TableCell>
                <TableCell>Kontakt</TableCell>
                <TableCell>E-Mail</TableCell>
                <TableCell>Telefon</TableCell>
                <TableCell>Website</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {vendorsLoading ? (
                <TableRow><TableCell colSpan={5} align="center">Laden...</TableCell></TableRow>
              ) : vendors.length === 0 ? (
                <TableRow><TableCell colSpan={5} align="center">Keine Lieferanten vorhanden</TableCell></TableRow>
              ) : (
                vendors.map((v) => (
                  <TableRow
                    key={v.id}
                    hover
                    sx={{ cursor: 'pointer' }}
                    onClick={() => navigate(`/bestellungen/lieferanten/${v.id}`)}
                  >
                    <TableCell>{v.name}</TableCell>
                    <TableCell>{v.kontakt_name || '–'}</TableCell>
                    <TableCell>{v.email ? <a href={`mailto:${v.email}`} onClick={(e) => e.stopPropagation()}>{v.email}</a> : '–'}</TableCell>
                    <TableCell>{v.telefon || '–'}</TableCell>
                    <TableCell>
                      {v.website ? (
                        <a href={v.website.startsWith('http') ? v.website : `https://${v.website}`} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>{v.website}</a>
                      ) : '–'}
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </TableContainer>

          <ChatAwareFab onClick={() => navigate('/bestellungen/lieferanten/neu')} aria-label="Lieferant hinzufügen">
            <AddIcon />
          </ChatAwareFab>
      </TabPanel>
      )}

      {/* ── Tab 2: Katalog ── */}
      <TabPanel value={tab} index={canManageVendors ? 2 : 1}>
        <KatalogTab />
      </TabPanel>
    </DashboardLayout>
  );
}