import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import {
  Box, Button, TextField, Typography, Paper, Stack, MenuItem, Select,
  FormControl, InputLabel, Alert, Skeleton, Divider, LinearProgress, Grid,
  ToggleButton, ToggleButtonGroup,
} from '@mui/material';
import { ArrowBack, Delete, Edit, Save, Cancel } from '@mui/icons-material';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { buchhaltungApi } from '../services/buchhaltung';
import { useNotification } from '../contexts/NotificationContext';
import type { KontoFormData, BudgetTyp } from '../types/buchhaltung.types';
import { ConfirmDialog } from '../components/templates';

const fmtEur = (n: number) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(n);

function FieldRow({ label, value }: { label: string; value: React.ReactNode }) {
  return (
    <Grid container spacing={2} sx={{ py: 0.75 }}>
      <Grid item xs={5}><Typography variant="body2" color="text.secondary">{label}</Typography></Grid>
      <Grid item xs={7}><Typography variant="body2">{value}</Typography></Grid>
    </Grid>
  );
}

function BudgetBar({ label, budget, spent }: { label: string; budget: number; spent: number }) {
  const utilization = budget > 0 ? Math.min((spent / budget) * 100, 100) : 0;
  const over = spent > budget && budget > 0;
  return (
    <Box sx={{ mb: 1.5 }}>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.25 }}>
        <Typography variant="body2" color="text.secondary">{label}</Typography>
        <Typography variant="body2">
          {fmtEur(spent)} / {fmtEur(budget)}
        </Typography>
      </Box>
      {budget > 0 && (
        <LinearProgress
          variant="determinate"
          value={utilization}
          color={over ? 'error' : utilization > 80 ? 'warning' : 'primary'}
          sx={{ height: 6, borderRadius: 3 }}
        />
      )}
    </Box>
  );
}

export default function BuchhaltungKontoManage() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const qc = useQueryClient();
  const { showSuccess, showError } = useNotification();
  const kontoId = Number(id);

  const [isEditing, setIsEditing] = useState(false);
  const [form, setForm] = useState<Partial<KontoFormData>>({});
  const [deleteOpen, setDeleteOpen] = useState(false);
  const [saveError, setSaveError] = useState<string | null>(null);

  const { data, isLoading, isError } = useQuery({
    queryKey: ['kontoDetail', kontoId],
    queryFn: () => buchhaltungApi.getKontoDetail(kontoId),
    enabled: !!kontoId,
  });

  const { data: alleKonten = [] } = useQuery({
    queryKey: ['buchhaltung-konten', data?.konto.haushaltsjahr_id],
    queryFn: () => buchhaltungApi.getKonten(data!.konto.haushaltsjahr_id),
    enabled: !!data?.konto.haushaltsjahr_id,
  });

  const { data: kategorien = [] } = useQuery({
    queryKey: ['buchhaltung-kategorien', data?.konto.haushaltsjahr_id],
    queryFn: () => buchhaltungApi.getKategorien(data!.konto.haushaltsjahr_id),
    enabled: !!data?.konto.haushaltsjahr_id,
  });

  useEffect(() => {
    if (data?.konto) {
      const k = data.konto;
      setForm({
        haushaltsjahr_id: k.haushaltsjahr_id,
        kontonummer: k.kontonummer,
        bezeichnung: k.bezeichnung,
        budget_gwg: k.budget_gwg,
        budget_anlagen: k.budget_anlagen,
        budget_instandhaltung: k.budget_instandhaltung,
        budget_typ: k.budget_typ || 'detailliert',
        budget_gesamt: k.budget_gesamt || 0,
        parent_id: k.parent_id ?? undefined,
        kategorie_id: k.kategorie_id ?? undefined,
        notizen: k.notizen ?? '',
      });
    }
  }, [data]);

  const updateMut = useMutation({
    mutationFn: (d: Partial<KontoFormData>) => buchhaltungApi.updateKonto(kontoId, d),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['kontoDetail', kontoId] });
      qc.invalidateQueries({ queryKey: ['kontenTree'] });
      qc.invalidateQueries({ queryKey: ['buchhaltung-konten'] });
      showSuccess('Konto gespeichert');
      setIsEditing(false);
      setSaveError(null);
    },
    onError: (err: any) => {
      const msg = err?.response?.data?.message || err?.message || 'Speichern fehlgeschlagen';
      if (err?.response?.status === 400) { setSaveError(msg); } else { showError(msg); }
    },
  });

  const deleteMut = useMutation({
    mutationFn: () => buchhaltungApi.deleteKonto(kontoId),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['kontenTree'] });
      qc.invalidateQueries({ queryKey: ['buchhaltung-konten'] });
      showSuccess('Konto gelöscht');
      navigate('/buchhaltung?tab=2');
    },
    onError: () => showError('Löschen fehlgeschlagen'),
  });

  if (isLoading) return <DashboardLayout><Box sx={{ p: 3 }}><Skeleton variant="rectangular" height={400} /></Box></DashboardLayout>;
  if (isError || !data) return <DashboardLayout><Box sx={{ p: 3 }}><Alert severity="error">Konto nicht gefunden.</Alert></Box></DashboardLayout>;

  const konto = data.konto;
  const { transaktionen } = data;
  const otherKonten = alleKonten.filter(k => k.id !== kontoId);
  const parentKonto = alleKonten.find(k => k.id === konto.parent_id);
  const kategorie = kategorien.find(k => k.id === konto.kategorie_id);

  const spentGwg = transaktionen.filter(t => t.typ === 'ausgabe' && t.status === 'gebucht' && t.ausgaben_typ === 'gwg').reduce((s, t) => s + Number(t.betrag), 0);
  const spentAnlagen = transaktionen.filter(t => t.typ === 'ausgabe' && t.status === 'gebucht' && t.ausgaben_typ === 'anlagen').reduce((s, t) => s + Number(t.betrag), 0);
  const spentInst = transaktionen.filter(t => t.typ === 'ausgabe' && t.status === 'gebucht' && t.ausgaben_typ === 'instandhaltung').reduce((s, t) => s + Number(t.betrag), 0);

  // Sibling budget usage for parent reference
  const siblingBudgets = parentKonto ? (() => {
    const siblings = alleKonten.filter(k => k.parent_id === parentKonto.id && k.id !== kontoId);
    return {
      gwg: siblings.reduce((s, k) => s + Number(k.budget_gwg || 0), 0),
      anlagen: siblings.reduce((s, k) => s + Number(k.budget_anlagen || 0), 0),
      instandhaltung: siblings.reduce((s, k) => s + Number(k.budget_instandhaltung || 0), 0),
    };
  })() : null;

  const handleSave = () => {
    if (!form.bezeichnung) return;
    updateMut.mutate(form);
  };

  const handleCancel = () => {
    const k = konto;
    setForm({
      haushaltsjahr_id: k.haushaltsjahr_id,
      kontonummer: k.kontonummer,
      bezeichnung: k.bezeichnung,
      budget_gwg: k.budget_gwg,
      budget_anlagen: k.budget_anlagen,
      budget_instandhaltung: k.budget_instandhaltung,
      budget_typ: k.budget_typ || 'detailliert',
      budget_gesamt: k.budget_gesamt || 0,
      parent_id: k.parent_id ?? undefined,
      kategorie_id: k.kategorie_id ?? undefined,
      notizen: k.notizen ?? '',
    });
    setIsEditing(false);
    setSaveError(null);
  };

  return (
    <DashboardLayout>
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
        <Button startIcon={<ArrowBack />} onClick={() => navigate('/buchhaltung?tab=2')}>
          Zurück
        </Button>
        <Typography variant="h5" sx={{ flexGrow: 1, ml: 1 }}>
          {konto.kontonummer} — {konto.bezeichnung}
        </Typography>
        {isEditing ? (
          <>
            <Button variant="outlined" startIcon={<Cancel />} onClick={handleCancel}>Abbrechen</Button>
            <Button variant="contained" startIcon={<Save />} onClick={handleSave} disabled={updateMut.isPending || !form.bezeichnung}>Speichern</Button>
          </>
        ) : (
          <>
            <Button variant="outlined" color="error" size="small" startIcon={<Delete />} onClick={() => setDeleteOpen(true)}>Löschen</Button>
            <Button variant="outlined" size="small" startIcon={<Edit />} onClick={() => setIsEditing(true)}>Bearbeiten</Button>
          </>
        )}
      </Box>

      <Stack spacing={3} sx={{ maxWidth: 640 }}>
        {/* Section: Allgemein */}
        <Paper sx={{ p: 2.5 }}>
          <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 1 }}>Allgemein</Typography>
          <Divider sx={{ mb: 1.5 }} />
          {isEditing ? (
            <Stack spacing={2}>
              <TextField label="Kontonummer" type="number" value={form.kontonummer ?? ''} onChange={e => setForm(f => ({ ...f, kontonummer: Number(e.target.value) }))} required fullWidth size="small" />
              <TextField label="Bezeichnung" value={form.bezeichnung ?? ''} onChange={e => setForm(f => ({ ...f, bezeichnung: e.target.value }))} required fullWidth size="small" />
              <FormControl fullWidth size="small">
                <InputLabel>Übergeordnetes Konto</InputLabel>
                <Select value={form.parent_id ?? ''} label="Übergeordnetes Konto" onChange={e => setForm(f => ({ ...f, parent_id: e.target.value ? Number(e.target.value) : undefined }))}>
                  <MenuItem value=""><em>Kein übergeordnetes Konto</em></MenuItem>
                  {otherKonten.map(k => <MenuItem key={k.id} value={k.id}>{k.kontonummer} – {k.bezeichnung}</MenuItem>)}
                </Select>
              </FormControl>
              {kategorien.length > 0 && (
                <FormControl fullWidth size="small">
                  <InputLabel>Kategorie</InputLabel>
                  <Select value={form.kategorie_id ?? ''} label="Kategorie" onChange={e => setForm(f => ({ ...f, kategorie_id: e.target.value ? Number(e.target.value) : undefined }))}>
                    <MenuItem value=""><em>Keine Kategorie</em></MenuItem>
                    {kategorien.map(k => <MenuItem key={k.id} value={k.id}>{k.bezeichnung}</MenuItem>)}
                  </Select>
                </FormControl>
              )}
              <TextField label="Notizen" value={form.notizen ?? ''} onChange={e => setForm(f => ({ ...f, notizen: e.target.value }))} multiline rows={3} fullWidth size="small" />
            </Stack>
          ) : (
            <>
              <FieldRow label="Kontonummer" value={konto.kontonummer} />
              <FieldRow label="Bezeichnung" value={konto.bezeichnung} />
              <FieldRow label="Übergeordnetes Konto" value={parentKonto ? `${parentKonto.kontonummer} – ${parentKonto.bezeichnung}` : '—'} />
              <FieldRow label="Kategorie" value={kategorie?.bezeichnung || '—'} />
              <FieldRow label="Notizen" value={konto.notizen || '—'} />
            </>
          )}
        </Paper>

        {/* Section: Budget */}
        <Paper sx={{ p: 2.5 }}>
          <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 1 }}>Budget</Typography>
          <Divider sx={{ mb: 1.5 }} />
          {isEditing ? (
            <Stack spacing={2}>
              {!konto.parent_id && (
                <Box>
                  <Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>Budget-Typ</Typography>
                  <ToggleButtonGroup
                    value={form.budget_typ || 'detailliert'}
                    exclusive
                    size="small"
                    onChange={(_, val) => { if (val) setForm(f => ({ ...f, budget_typ: val as BudgetTyp })); }}
                  >
                    <ToggleButton value="detailliert">Detailliert</ToggleButton>
                    <ToggleButton value="einfach">Einfach</ToggleButton>
                  </ToggleButtonGroup>
                </Box>
              )}
              {(form.budget_typ || 'detailliert') === 'einfach' ? (
                <TextField label="Budget Gesamt (€)" type="number" value={form.budget_gesamt ?? 0} onChange={e => setForm(f => ({ ...f, budget_gesamt: parseFloat(e.target.value) || 0 }))} inputProps={{ step: '0.01', min: '0' }} fullWidth size="small" />
              ) : (
                <>
                  <TextField label="Budget GWG (€)" type="number" value={form.budget_gwg ?? 0} onChange={e => setForm(f => ({ ...f, budget_gwg: parseFloat(e.target.value) || 0 }))} inputProps={{ step: '0.01', min: '0' }} fullWidth size="small"
                    helperText={parentKonto && siblingBudgets ? `Eltern: ${fmtEur(parentKonto.budget_gwg)}, vergeben: ${fmtEur(siblingBudgets.gwg)}, verfügbar: ${fmtEur(parentKonto.budget_gwg - siblingBudgets.gwg)}` : undefined} />
                  <TextField label="Budget Anlagen (€)" type="number" value={form.budget_anlagen ?? 0} onChange={e => setForm(f => ({ ...f, budget_anlagen: parseFloat(e.target.value) || 0 }))} inputProps={{ step: '0.01', min: '0' }} fullWidth size="small"
                    helperText={parentKonto && siblingBudgets ? `Eltern: ${fmtEur(parentKonto.budget_anlagen)}, vergeben: ${fmtEur(siblingBudgets.anlagen)}, verfügbar: ${fmtEur(parentKonto.budget_anlagen - siblingBudgets.anlagen)}` : undefined} />
                  <TextField label="Budget Instandhaltung (€)" type="number" value={form.budget_instandhaltung ?? 0} onChange={e => setForm(f => ({ ...f, budget_instandhaltung: parseFloat(e.target.value) || 0 }))} inputProps={{ step: '0.01', min: '0' }} fullWidth size="small"
                    helperText={parentKonto && siblingBudgets ? `Eltern: ${fmtEur(parentKonto.budget_instandhaltung)}, vergeben: ${fmtEur(siblingBudgets.instandhaltung)}, verfügbar: ${fmtEur(parentKonto.budget_instandhaltung - siblingBudgets.instandhaltung)}` : undefined} />
                </>
              )}
              {saveError && <Alert severity="error" onClose={() => setSaveError(null)}>{saveError}</Alert>}
            </Stack>
          ) : (
            <>
              <FieldRow label="Budget-Typ" value={(konto.budget_typ || 'detailliert') === 'einfach' ? 'Einfach' : 'Detailliert'} />
              <Divider sx={{ my: 1 }} />
              {(konto.budget_typ || 'detailliert') === 'einfach' ? (
                <>
                  <BudgetBar label="Gesamt" budget={konto.budget_gesamt || 0} spent={spentGwg + spentAnlagen + spentInst} />
                  <Divider sx={{ my: 1 }} />
                  <FieldRow label="Budget Gesamt" value={fmtEur(konto.budget_gesamt || 0)} />
                  <FieldRow label="Ausgaben Gesamt" value={fmtEur(spentGwg + spentAnlagen + spentInst)} />
                </>
              ) : (
                <>
                  <BudgetBar label="GWG" budget={konto.budget_gwg} spent={spentGwg} />
                  <BudgetBar label="Anlagen" budget={konto.budget_anlagen} spent={spentAnlagen} />
                  <BudgetBar label="Instandhaltung" budget={konto.budget_instandhaltung} spent={spentInst} />
                  <Divider sx={{ my: 1 }} />
                  <FieldRow label="Budget Gesamt" value={fmtEur(konto.budget_gwg + konto.budget_anlagen + konto.budget_instandhaltung)} />
                  <FieldRow label="Ausgaben Gesamt" value={fmtEur(spentGwg + spentAnlagen + spentInst)} />
                </>
              )}
            </>
          )}
        </Paper>
      </Stack>

      <ConfirmDialog
        open={deleteOpen}
        onClose={() => setDeleteOpen(false)}
        onConfirm={() => { deleteMut.mutate(); setDeleteOpen(false); }}
        title="Konto löschen"
        message={
          <Typography>
            Möchten Sie das Konto <strong>{konto.kontonummer} — {konto.bezeichnung}</strong> wirklich löschen?
            Diese Aktion kann nicht rückgängig gemacht werden.
          </Typography>
        }
        confirmLabel="Löschen"
        confirmColor="error"
        isLoading={deleteMut.isPending}
      />
    </DashboardLayout>
  );
}
