import { useState, useCallback, useRef } from 'react';
import {
  Box,
  Typography,
  Paper,
  Button,
  TextField,
  IconButton,
  Autocomplete,
  Tooltip,
  Divider,
  MenuItem,
} from '@mui/material';
import {
  Add as AddIcon,
  RemoveCircleOutline as RemoveIcon,
  Delete as DeleteIcon,
} from '@mui/icons-material';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { PageHeader, FormLayout } from '../components/templates';
import { useNotification } from '../contexts/NotificationContext';
import { bestellungApi } from '../services/bestellung';
import { ausruestungsanfrageApi } from '../services/ausruestungsanfrage';
import type { BestellungFormData, LieferantFormData, Lieferant } from '../types/bestellung.types';
import type { AusruestungArtikel, AusruestungEigenschaft } from '../types/ausruestungsanfrage.types';

// ── EigenschaftFields (same pattern as AusruestungsanfrageNeu) ──

interface EigenschaftFieldsProps {
  eigenschaften: AusruestungEigenschaft[];
  values: Record<number, string>;
  onChange: (eigenschaftId: number, wert: string) => void;
}

function EigenschaftFields({ eigenschaften, values, onChange }: EigenschaftFieldsProps) {
  if (eigenschaften.length === 0) return null;
  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, ml: 2, mt: 1, pl: 1.5, borderLeft: '2px solid', borderColor: 'divider' }}>
      {eigenschaften.map(e => (
        <Box key={e.id} sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
          {e.typ === 'options' && e.optionen && e.optionen.length > 0 ? (
            <TextField
              select
              size="small"
              label={e.name}
              value={values[e.id] || ''}
              onChange={ev => onChange(e.id, ev.target.value)}
              required={e.pflicht}
              sx={{ minWidth: 160 }}
            >
              <MenuItem value="">—</MenuItem>
              {e.optionen.map(opt => (
                <MenuItem key={opt} value={opt}>{opt}</MenuItem>
              ))}
            </TextField>
          ) : (
            <TextField
              size="small"
              label={e.name}
              value={values[e.id] || ''}
              onChange={ev => onChange(e.id, ev.target.value)}
              required={e.pflicht}
              sx={{ minWidth: 160 }}
            />
          )}
        </Box>
      ))}
    </Box>
  );
}

// ── Types for form state ──

interface CatalogPositionForm {
  artikel_id?: number;
  bezeichnung: string;
  menge: number;
  einheit: string;
}

interface FreePositionForm {
  bezeichnung: string;
  menge: number;
  einheit: string;
}

const emptyOrderForm: BestellungFormData = { bezeichnung: '', lieferant_id: undefined, besteller_id: '', mitglied_id: undefined, notizen: '', positionen: [] };
const emptyVendorForm: LieferantFormData = { name: '', kontakt_name: '', email: '', telefon: '', adresse: '', website: '', notizen: '' };

export default function BestellungNeu() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { showSuccess, showError } = useNotification();

  const [orderForm, setOrderForm] = useState<BestellungFormData>({ ...emptyOrderForm });
  const [inlineVendorOpen, setInlineVendorOpen] = useState(false);
  const [inlineVendorForm, setInlineVendorForm] = useState<LieferantFormData>({ ...emptyVendorForm });

  // Position state (split into catalog + free text)
  const [catalogItems, setCatalogItems] = useState<CatalogPositionForm[]>([{ bezeichnung: '', menge: 1, einheit: 'Stk' }]);
  const [freeItems, setFreeItems] = useState<FreePositionForm[]>([]);

  // Eigenschaften state
  const [itemEigenschaften, setItemEigenschaften] = useState<Record<number, AusruestungEigenschaft[]>>({});
  const itemEigenschaftenRef = useRef(itemEigenschaften);
  itemEigenschaftenRef.current = itemEigenschaften;
  const [itemEigenschaftValues, setItemEigenschaftValues] = useState<Record<number, Record<number, string>>>({});

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

  const { data: orderUsers = [] } = useQuery({
    queryKey: ['bestellungen', 'order-users'],
    queryFn: bestellungApi.getOrderUsers,
  });

  const { data: allMembers = [] } = useQuery({
    queryKey: ['bestellungen', 'all-members'],
    queryFn: bestellungApi.getAllMembers,
  });

  const { data: katalogItems = [] } = useQuery({
    queryKey: ['katalog'],
    queryFn: () => ausruestungsanfrageApi.getItems({ aktiv: true }),
    staleTime: 5 * 60 * 1000,
  });

  // ── Mutations ──
  const createOrder = useMutation({
    mutationFn: (data: BestellungFormData) => bestellungApi.createOrder(data),
    onSuccess: (created) => {
      queryClient.invalidateQueries({ queryKey: ['bestellungen'] });
      showSuccess('Bestellung erstellt');
      navigate(`/bestellungen/${created.id}`);
    },
    onError: (error: any) => showError(error?.response?.data?.message || 'Fehler beim Erstellen der Bestellung'),
  });

  const createVendor = useMutation({
    mutationFn: (data: LieferantFormData) => bestellungApi.createVendor(data),
    onSuccess: (newVendor: Lieferant) => {
      queryClient.invalidateQueries({ queryKey: ['lieferanten'] });
      showSuccess('Lieferant erstellt');
      setOrderForm((f) => ({ ...f, lieferant_id: newVendor.id }));
      setInlineVendorOpen(false);
      setInlineVendorForm({ ...emptyVendorForm });
    },
    onError: () => showError('Fehler beim Erstellen des Lieferanten'),
  });

  // ── Eigenschaft loading ──
  const loadEigenschaften = useCallback(async (artikelId: number) => {
    if (itemEigenschaftenRef.current[artikelId]) return;
    try {
      const eigs = await ausruestungsanfrageApi.getArtikelEigenschaften(artikelId);
      if (eigs && eigs.length > 0) {
        setItemEigenschaften(prev => ({ ...prev, [artikelId]: eigs }));
      }
    } catch (err) {
      console.warn('Failed to load eigenschaften for artikel', artikelId, err);
    }
  }, []);

  // ── Submit ──
  const handleSubmit = () => {
    if (!orderForm.bezeichnung.trim()) return;

    // Build catalog positions with spezifikationen from Eigenschaft values
    const catalogPositionen = catalogItems
      .filter(i => i.bezeichnung.trim() && i.artikel_id)
      .map((item, idx) => {
        const vals = itemEigenschaftValues[idx] || {};
        const spezifikationen = Object.entries(vals)
          .filter(([, wert]) => wert.trim())
          .map(([eid, wert]) => {
            const eig = item.artikel_id ? itemEigenschaften[item.artikel_id]?.find(e => e.id === Number(eid)) : null;
            return `${eig?.name || eid}: ${wert}`;
          });
        return {
          bezeichnung: item.bezeichnung,
          menge: item.menge,
          einheit: item.einheit,
          artikel_id: item.artikel_id,
          spezifikationen: spezifikationen.length > 0 ? spezifikationen : undefined,
        };
      });

    // Build free text positions
    const freePositionen = freeItems
      .filter(i => i.bezeichnung.trim())
      .map(i => ({
        bezeichnung: i.bezeichnung,
        menge: i.menge,
        einheit: i.einheit,
      }));

    // Check required Eigenschaften for catalog items
    for (let idx = 0; idx < catalogItems.length; idx++) {
      const item = catalogItems[idx];
      if (!item.bezeichnung.trim() || !item.artikel_id) continue;
      if (itemEigenschaften[item.artikel_id]) {
        for (const e of itemEigenschaften[item.artikel_id]) {
          if (e.pflicht && !(itemEigenschaftValues[idx]?.[e.id]?.trim())) {
            showError(`Pflichtfeld "${e.name}" für "${item.bezeichnung}" fehlt`);
            return;
          }
        }
      }
    }

    const allPositionen = [...catalogPositionen, ...freePositionen];
    createOrder.mutate({ ...orderForm, positionen: allPositionen });
  };

  return (
    <DashboardLayout>
      <PageHeader
        title="Neue Bestellung"
        backTo="/bestellungen"
      />

      <FormLayout
        actions={<>
          <Button onClick={() => navigate('/bestellungen')}>Abbrechen</Button>
          <Button
            variant="contained"
            onClick={handleSubmit}
            disabled={!orderForm.bezeichnung.trim() || createOrder.isPending}
          >
            Erstellen
          </Button>
        </>}
      >
        <TextField
          label="Bezeichnung"
          required
          InputLabelProps={{ shrink: true }}
          value={orderForm.bezeichnung}
          onChange={(e) => setOrderForm((f) => ({ ...f, bezeichnung: e.target.value }))}
        />

        {/* Lieferant + inline create */}
        <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
          <Autocomplete
            options={vendors}
            getOptionLabel={(o) => o.name}
            value={vendors.find((v) => v.id === orderForm.lieferant_id) || null}
            onChange={(_e, v) => setOrderForm((f) => ({ ...f, lieferant_id: v?.id }))}
            renderInput={(params) => <TextField {...params} label="Lieferant" />}
            sx={{ flexGrow: 1 }}
          />
          <Tooltip title="Neuen Lieferant anlegen">
            <IconButton
              onClick={() => setInlineVendorOpen(!inlineVendorOpen)}
              color={inlineVendorOpen ? 'primary' : 'default'}
              sx={{ mt: 1 }}
            >
              <AddIcon />
            </IconButton>
          </Tooltip>
        </Box>
        {inlineVendorOpen && (
          <Paper variant="outlined" sx={{ p: 2, display: 'flex', flexDirection: 'column', gap: 1.5 }}>
            <Typography variant="subtitle2">Neuer Lieferant</Typography>
            <TextField size="small" label="Name *" value={inlineVendorForm.name} onChange={(e) => setInlineVendorForm((f) => ({ ...f, name: e.target.value }))} />
            <TextField size="small" label="Kontakt-Name" value={inlineVendorForm.kontakt_name || ''} onChange={(e) => setInlineVendorForm((f) => ({ ...f, kontakt_name: e.target.value }))} />
            <TextField size="small" label="E-Mail" value={inlineVendorForm.email || ''} onChange={(e) => setInlineVendorForm((f) => ({ ...f, email: e.target.value }))} />
            <TextField size="small" label="Telefon" value={inlineVendorForm.telefon || ''} onChange={(e) => setInlineVendorForm((f) => ({ ...f, telefon: e.target.value }))} />
            <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
              <Button size="small" onClick={() => { setInlineVendorOpen(false); setInlineVendorForm({ ...emptyVendorForm }); }}>Abbrechen</Button>
              <Button size="small" variant="contained" onClick={() => createVendor.mutate(inlineVendorForm)} disabled={!inlineVendorForm.name.trim() || createVendor.isPending}>Anlegen</Button>
            </Box>
          </Paper>
        )}

        <Autocomplete
          options={orderUsers}
          getOptionLabel={(o) => o.name}
          value={orderUsers.find((u) => u.id === orderForm.besteller_id) || null}
          onChange={(_e, v) => setOrderForm((f) => ({ ...f, besteller_id: v?.id || '' }))}
          renderInput={(params) => <TextField {...params} label="Besteller" />}
        />

        <Autocomplete
          options={allMembers}
          getOptionLabel={(o) => o.name}
          value={allMembers.find((u) => u.id === orderForm.mitglied_id) || null}
          onChange={(_e, v) => setOrderForm((f) => ({ ...f, mitglied_id: v?.id }))}
          renderInput={(params) => <TextField {...params} label="Für Mitglied" />}
        />

        <TextField
          label="Notizen"
          multiline
          rows={3}
          value={orderForm.notizen || ''}
          onChange={(e) => setOrderForm((f) => ({ ...f, notizen: e.target.value }))}
        />

        {/* ── Positionen: Katalogartikel ── */}
        <Divider />
        <Typography variant="subtitle2">Aus Katalog</Typography>
        {catalogItems.map((item, idx) => (
          <Box key={`cat-${idx}`}>
            <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
              <Autocomplete<AusruestungArtikel>
                options={katalogItems}
                getOptionLabel={(o) => o.bezeichnung}
                value={item.artikel_id ? katalogItems.find(c => c.id === item.artikel_id) || null : null}
                onChange={(_, v) => {
                  if (v) {
                    setCatalogItems(prev => prev.map((it, i) => i === idx ? { ...it, artikel_id: v.id, bezeichnung: v.bezeichnung } : it));
                    loadEigenschaften(v.id);
                  } else {
                    setCatalogItems(prev => prev.map((it, i) => i === idx ? { ...it, artikel_id: undefined, bezeichnung: '' } : it));
                    setItemEigenschaftValues(prev => { const n = { ...prev }; delete n[idx]; return n; });
                  }
                }}
                renderInput={(params) => <TextField {...params} label="Katalogartikel" size="small" />}
                renderOption={(props, option) => (
                  <li {...props} key={option.id}>
                    <Box>
                      <Typography variant="body2">{option.bezeichnung}</Typography>
                      {option.kategorie_name && <Typography variant="caption" color="text.secondary">{option.kategorie_name}</Typography>}
                    </Box>
                  </li>
                )}
                isOptionEqualToValue={(o, v) => o.id === v.id}
                sx={{ flexGrow: 1 }}
              />
              <TextField
                label="Menge"
                size="small"
                type="number"
                InputLabelProps={{ shrink: true }}
                value={item.menge}
                onChange={(e) => setCatalogItems(prev => prev.map((it, i) => i === idx ? { ...it, menge: Math.max(1, Number(e.target.value) || 1) } : it))}
                sx={{ width: 90 }}
                inputProps={{ min: 1 }}
              />
              <TextField
                label="Einheit"
                size="small"
                InputLabelProps={{ shrink: true }}
                value={item.einheit}
                onChange={(e) => setCatalogItems(prev => prev.map((it, i) => i === idx ? { ...it, einheit: e.target.value } : it))}
                sx={{ width: 100 }}
              />
              <IconButton
                size="small"
                color="error"
                onClick={() => {
                  setCatalogItems(prev => prev.filter((_, i) => i !== idx));
                  setItemEigenschaftValues(prev => { const n = { ...prev }; delete n[idx]; return n; });
                }}
                disabled={catalogItems.length <= 1 && freeItems.length === 0}
              >
                <DeleteIcon fontSize="small" />
              </IconButton>
            </Box>
            {item.artikel_id && itemEigenschaften[item.artikel_id] && itemEigenschaften[item.artikel_id].length > 0 && (
              <EigenschaftFields
                eigenschaften={itemEigenschaften[item.artikel_id]}
                values={itemEigenschaftValues[idx] || {}}
                onChange={(eid, wert) => setItemEigenschaftValues(prev => ({
                  ...prev,
                  [idx]: { ...(prev[idx] || {}), [eid]: wert },
                }))}
              />
            )}
          </Box>
        ))}
        <Button
          size="small"
          startIcon={<AddIcon />}
          onClick={() => setCatalogItems(prev => [...prev, { bezeichnung: '', menge: 1, einheit: 'Stk' }])}
        >
          Katalogartikel hinzufügen
        </Button>

        {/* ── Positionen: Freitext ── */}
        <Divider />
        <Typography variant="subtitle2">Freitext-Positionen</Typography>
        {freeItems.length === 0 ? (
          <Typography variant="body2" color="text.secondary">Keine Freitext-Positionen.</Typography>
        ) : (
          freeItems.map((item, idx) => (
            <Box key={`free-${idx}`} sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
              <TextField
                size="small"
                label="Bezeichnung"
                value={item.bezeichnung}
                onChange={(e) => setFreeItems(prev => prev.map((it, i) => i === idx ? { ...it, bezeichnung: e.target.value } : it))}
                sx={{ flexGrow: 1 }}
              />
              <TextField
                label="Menge"
                size="small"
                type="number"
                InputLabelProps={{ shrink: true }}
                value={item.menge}
                onChange={(e) => setFreeItems(prev => prev.map((it, i) => i === idx ? { ...it, menge: Math.max(1, Number(e.target.value) || 1) } : it))}
                sx={{ width: 90 }}
                inputProps={{ min: 1 }}
              />
              <TextField
                label="Einheit"
                size="small"
                InputLabelProps={{ shrink: true }}
                value={item.einheit}
                onChange={(e) => setFreeItems(prev => prev.map((it, i) => i === idx ? { ...it, einheit: e.target.value } : it))}
                sx={{ width: 100 }}
              />
              <IconButton
                size="small"
                color="error"
                onClick={() => setFreeItems(prev => prev.filter((_, i) => i !== idx))}
              >
                <RemoveIcon />
              </IconButton>
            </Box>
          ))
        )}
        <Button
          size="small"
          startIcon={<AddIcon />}
          onClick={() => setFreeItems(prev => [...prev, { bezeichnung: '', menge: 1, einheit: 'Stk' }])}
        >
          Freitext-Position hinzufügen
        </Button>

        {/* ── Submit ── */}
      </FormLayout>
    </DashboardLayout>
  );
}
