import { useState, useMemo, useEffect } from 'react';
import {
  Box, Tab, Tabs, Typography, Grid, Chip,
  Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper,
  TextField, MenuItem,
} from '@mui/material';
import { Add as AddIcon } from '@mui/icons-material';
import { useQuery } from '@tanstack/react-query';
import { useSearchParams, useNavigate } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import ChatAwareFab from '../components/shared/ChatAwareFab';
import { usePermissionContext } from '../contexts/PermissionContext';
import { ausruestungsanfrageApi } from '../services/ausruestungsanfrage';
import { KatalogTab } from '../components/shared/KatalogTab';
import { AUSRUESTUNG_STATUS_LABELS, AUSRUESTUNG_STATUS_COLORS } from '../types/ausruestungsanfrage.types';
import type {
  AusruestungAnfrageStatus, AusruestungAnfrage,
  AusruestungOverview,
} from '../types/ausruestungsanfrage.types';

// ─── Helpers ─────────────────────────────────────────────────────────────────

function formatOrderId(r: AusruestungAnfrage): string {
  if (r.bestell_jahr && r.bestell_nummer) {
    return `${r.bestell_jahr}/${String(r.bestell_nummer).padStart(3, '0')}`;
  }
  return `#${r.id}`;
}

const ACTIVE_STATUSES: AusruestungAnfrageStatus[] = ['offen', 'genehmigt', 'bestellt'];

// ─── My Requests Tab ────────────────────────────────────────────────────────

function MeineAnfragenTab() {
  const { hasPermission } = usePermissionContext();
  const navigate = useNavigate();

  const canCreate = hasPermission('ausruestungsanfrage:create_request');

  const [statusFilter, setStatusFilter] = useState<AusruestungAnfrageStatus[]>(ACTIVE_STATUSES);

  const { data: requests = [], isLoading } = useQuery({
    queryKey: ['ausruestungsanfrage', 'myRequests'],
    queryFn: () => ausruestungsanfrageApi.getMyRequests(),
  });

  const filteredRequests = useMemo(() => {
    if (statusFilter.length === 0) return requests;
    return requests.filter(r => statusFilter.includes(r.status));
  }, [requests, statusFilter]);

  const handleStatusFilterChange = (value: string) => {
    if (value === 'all') {
      setStatusFilter([]);
    } else if (value === 'active') {
      setStatusFilter(ACTIVE_STATUSES);
    } else {
      setStatusFilter([value as AusruestungAnfrageStatus]);
    }
  };

  const currentFilterValue = useMemo(() => {
    if (statusFilter.length === 0) return 'all';
    if (statusFilter.length === ACTIVE_STATUSES.length && ACTIVE_STATUSES.every(s => statusFilter.includes(s))) return 'active';
    return statusFilter[0] || 'all';
  }, [statusFilter]);

  if (isLoading) return <Typography color="text.secondary">Lade Anfragen...</Typography>;

  return (
    <Box>
      <Box sx={{ display: 'flex', gap: 2, mb: 2, alignItems: 'center' }}>
        <TextField
          select
          size="small"
          label="Status"
          value={currentFilterValue}
          onChange={e => handleStatusFilterChange(e.target.value)}
          sx={{ minWidth: 200 }}
        >
          <MenuItem value="active">Aktive Anfragen</MenuItem>
          <MenuItem value="all">Alle</MenuItem>
          {(Object.keys(AUSRUESTUNG_STATUS_LABELS) as AusruestungAnfrageStatus[]).map(s => (
            <MenuItem key={s} value={s}>{AUSRUESTUNG_STATUS_LABELS[s]}</MenuItem>
          ))}
        </TextField>
      </Box>

      {filteredRequests.length === 0 ? (
        <Typography color="text.secondary" sx={{ mb: 2 }}>Keine Anfragen vorhanden.</Typography>
      ) : (
        <TableContainer component={Paper} variant="outlined">
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell>Anfrage ID</TableCell>
                <TableCell>Bezeichnung</TableCell>
                <TableCell>Status</TableCell>
                <TableCell>Im Haus</TableCell>
                <TableCell>Positionen</TableCell>
                <TableCell>Geliefert</TableCell>
                <TableCell>Erstellt am</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {filteredRequests.map(r => (
                <TableRow key={r.id} hover sx={{ cursor: 'pointer' }} onClick={() => navigate('/ausruestungsanfrage/' + r.id)}>
                  <TableCell>{formatOrderId(r)}</TableCell>
                  <TableCell>{r.bezeichnung || '-'}</TableCell>
                  <TableCell><Chip label={AUSRUESTUNG_STATUS_LABELS[r.status]} color={AUSRUESTUNG_STATUS_COLORS[r.status]} size="small" /></TableCell>
                  <TableCell>{r.im_haus ? <Chip label="Im Haus" color="success" size="small" /> : null}</TableCell>
                  <TableCell>{r.positionen_count ?? r.items_count ?? '-'}</TableCell>
                  <TableCell>
                    {r.positionen_count != null && r.positionen_count > 0
                      ? `${r.geliefert_count ?? 0}/${r.positionen_count}`
                      : '-'}
                  </TableCell>
                  <TableCell>{new Date(r.erstellt_am).toLocaleDateString('de-AT')}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      )}

      {canCreate && (
        <ChatAwareFab onClick={() => navigate('/ausruestungsanfrage/neu')} aria-label="Neue Anfrage erstellen">
          <AddIcon />
        </ChatAwareFab>
      )}
    </Box>
  );
}

// ─── Admin All Requests Tab (merged with overview) ──────────────────────────

function AlleAnfragenTab() {
  const navigate = useNavigate();
  const [statusFilter, setStatusFilter] = useState<string>('alle');

  const { data: requests = [], isLoading: requestsLoading, isError: requestsError } = useQuery({
    queryKey: ['ausruestungsanfrage', 'allRequests', statusFilter],
    queryFn: () => ausruestungsanfrageApi.getRequests(statusFilter !== 'alle' ? { status: statusFilter } : undefined),
  });

  const { data: overview } = useQuery<AusruestungOverview>({
    queryKey: ['ausruestungsanfrage', 'overview-cards'],
    queryFn: () => ausruestungsanfrageApi.getOverview(),
  });

  return (
    <Box>
      <Grid container spacing={2} sx={{ mb: 3 }}>
        <Grid item xs={6} sm={3}>
          <Paper variant="outlined" sx={{ p: 2, textAlign: 'center' }}>
            <Typography variant="h4" fontWeight={700}>{overview?.pending_count ?? '-'}</Typography>
            <Typography variant="body2" color="text.secondary">Offene</Typography>
          </Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper variant="outlined" sx={{ p: 2, textAlign: 'center' }}>
            <Typography variant="h4" fontWeight={700}>{overview?.approved_count ?? '-'}</Typography>
            <Typography variant="body2" color="text.secondary">Genehmigte</Typography>
          </Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper variant="outlined" sx={{ p: 2, textAlign: 'center' }}>
            <Typography variant="h4" fontWeight={700} color="warning.main">{overview?.unhandled_count ?? '-'}</Typography>
            <Typography variant="body2" color="text.secondary">Neue (unbearbeitet)</Typography>
          </Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper variant="outlined" sx={{ p: 2, textAlign: 'center' }}>
            <Typography variant="h4" fontWeight={700}>{overview?.total_items ?? '-'}</Typography>
            <Typography variant="body2" color="text.secondary">Gesamt Artikel</Typography>
          </Paper>
        </Grid>
      </Grid>

      <TextField
        select
        size="small"
        label="Status Filter"
        value={statusFilter}
        onChange={e => setStatusFilter(e.target.value)}
        sx={{ minWidth: 200, mb: 2 }}
      >
        <MenuItem value="alle">Alle</MenuItem>
        {(Object.keys(AUSRUESTUNG_STATUS_LABELS) as AusruestungAnfrageStatus[]).map(s => (
          <MenuItem key={s} value={s}>{AUSRUESTUNG_STATUS_LABELS[s]}</MenuItem>
        ))}
      </TextField>

      {requestsLoading ? (
        <Typography color="text.secondary">Lade Anfragen...</Typography>
      ) : requestsError ? (
        <Typography color="error">Fehler beim Laden der Anfragen.</Typography>
      ) : requests.length === 0 ? (
        <Typography color="text.secondary">Keine Anfragen vorhanden.</Typography>
      ) : (
        <TableContainer component={Paper} variant="outlined">
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell>Anfrage ID</TableCell>
                <TableCell>Bezeichnung</TableCell>
                <TableCell>Anfrage für</TableCell>
                <TableCell>Status</TableCell>
                <TableCell>Im Haus</TableCell>
                <TableCell>Positionen</TableCell>
                <TableCell>Geliefert</TableCell>
                <TableCell>Erstellt am</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {requests.map(r => (
                <TableRow key={r.id} hover sx={{ cursor: 'pointer' }} onClick={() => navigate('/ausruestungsanfrage/' + r.id)}>
                  <TableCell>{formatOrderId(r)}</TableCell>
                  <TableCell>{r.bezeichnung || '-'}</TableCell>
                  <TableCell>{r.fuer_benutzer_name || r.anfrager_name || r.anfrager_id}</TableCell>
                  <TableCell><Chip label={AUSRUESTUNG_STATUS_LABELS[r.status]} color={AUSRUESTUNG_STATUS_COLORS[r.status]} size="small" /></TableCell>
                  <TableCell>{r.im_haus ? <Chip label="Im Haus" color="success" size="small" /> : null}</TableCell>
                  <TableCell>{r.positionen_count ?? r.items_count ?? '-'}</TableCell>
                  <TableCell>
                    {r.positionen_count != null && r.positionen_count > 0
                      ? `${r.geliefert_count ?? 0}/${r.positionen_count}`
                      : '-'}
                  </TableCell>
                  <TableCell>{new Date(r.erstellt_am).toLocaleDateString('de-AT')}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      )}
    </Box>
  );
}

// ─── Main Page ──────────────────────────────────────────────────────────────

export default function Ausruestungsanfrage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const { hasPermission } = usePermissionContext();

  const canView = hasPermission('ausruestungsanfrage:view');
  const canCreate = hasPermission('ausruestungsanfrage:create_request');
  const canApprove = hasPermission('ausruestungsanfrage:approve');

  const tabCount = (canCreate ? 1 : 0) + (canApprove ? 1 : 0) + (canView ? 1 : 0);

  const [activeTab, setActiveTab] = useState(() => {
    const t = Number(searchParams.get('tab'));
    return t >= 0 && t < tabCount ? t : 0;
  });

  useEffect(() => {
    const t = Number(searchParams.get('tab'));
    if (t >= 0 && t < tabCount) setActiveTab(t);
  }, [searchParams, tabCount]);

  const handleTabChange = (_: React.SyntheticEvent, val: number) => {
    setActiveTab(val);
    setSearchParams({ tab: String(val) }, { replace: true });
  };

  const tabIndex = useMemo(() => {
    const map: Record<string, number> = {};
    let next = 0;
    if (canCreate) { map.meine = next; next++; }
    if (canApprove) { map.alle = next; next++; }
    if (canView) { map.katalog = next; next++; }
    return map;
  }, [canCreate, canApprove, canView]);

  if (!canView && !canCreate && !canApprove) {
    return (
      <DashboardLayout>
        <Typography>Keine Berechtigung.</Typography>
      </DashboardLayout>
    );
  }

  return (
    <DashboardLayout>
      <Typography variant="h5" fontWeight={700} sx={{ mb: 2 }}>Interne Bestellungen</Typography>

      <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
        <Tabs value={activeTab} onChange={handleTabChange} variant="scrollable" scrollButtons="auto">
          {canCreate && <Tab label="Meine Anfragen" />}
          {canApprove && <Tab label="Alle Anfragen" />}
          {canView && <Tab label="Katalog" />}
        </Tabs>
      </Box>

      {canCreate && activeTab === tabIndex.meine && <MeineAnfragenTab />}
      {canApprove && activeTab === tabIndex.alle && <AlleAnfragenTab />}
      {canView && activeTab === tabIndex.katalog && <KatalogTab />}
    </DashboardLayout>
  );
}