/** Hill-climbing simulation: state gauges, hypothesis input, intervention picker, event log, debrief. */

import { useState } from 'react';
import Alert from '@mui/material/Alert';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Checkbox from '@mui/material/Checkbox';
import Chip from '@mui/material/Chip';
import FormControlLabel from '@mui/material/FormControlLabel';
import MenuItem from '@mui/material/MenuItem';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { ErrorNote, HBar, LoadingBox, SectionCard } from '../../components/labeleval/shared';
import { useAsync } from '../../components/hillclimb/shared';
import { getSimulationCatalog, startSimulation, stepSimulation } from '../../services/hillclimb';
import type { SimulationState } from '../../types/hillclimb';

function metricColor(name: string, value: number, inverted: string[]): string {
  const effective = inverted.includes(name) ? 100 - value : value;
  if (effective >= 60) return '#66bb6a';
  if (effective >= 40) return '#f9a825';
  return '#ef5350';
}

export default function SimulationView() {
  const catalog = useAsync(getSimulationCatalog);
  const [sim, setSim] = useState<SimulationState | null>(null);
  const [hypothesis, setHypothesis] = useState('');
  const [interventionId, setInterventionId] = useState('add_monitoring');
  const [revert, setRevert] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const start = () => {
    setBusy(true);
    setError(null);
    startSimulation(Math.floor(Math.random() * 100000), 8)
      .then(setSim)
      .catch((e: Error) => setError(e.message))
      .finally(() => setBusy(false));
  };

  const step = () => {
    if (!sim || !hypothesis.trim()) return;
    setBusy(true);
    setError(null);
    stepSimulation(sim.sim_id, hypothesis, interventionId, revert)
      .then((s) => {
        setSim(s);
        setHypothesis('');
        setRevert(false);
      })
      .catch((e: Error) => setError(e.message))
      .finally(() => setBusy(false));
  };

  if (catalog.loading && !catalog.data) return <LoadingBox label="Loading scenario…" />;
  if (catalog.error && !catalog.data) return <ErrorNote error={catalog.error} />;

  const inverted = catalog.data?.inverted_metrics ?? [];
  const interventions = catalog.data?.interventions ?? [];
  const scenario = catalog.data?.scenarios[0];
  const lastTurn = sim?.history[sim.history.length - 1] ?? null;

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      {error ? <ErrorNote error={error} /> : null}

      {!sim ? (
        <SectionCard title={scenario?.title ?? 'Scenario'} help="A stateful multi-objective exercise: each turn you write a falsifiable hypothesis, pick one intervention, measure the seeded (deterministic per seed) effect, and keep or reject. Safety has a hard floor — breach it and an incident fires.">
          <Typography variant="body2" sx={{ color: '#e6e9ec', lineHeight: 1.7, mb: 2 }}>
            {scenario?.narrative}
          </Typography>
          <Button variant="contained" onClick={start} disabled={busy}>
            Take over the team (8 turns)
          </Button>
        </SectionCard>
      ) : null}

      {sim ? (
        <>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
            <Chip size="small" label={`turn ${sim.turn}/${sim.max_turns}`} sx={{ bgcolor: '#0d47a1', color: '#90caf9', fontWeight: 700 }} />
            <Chip
              size="small"
              label={`balanced objective ${sim.objective_history[sim.objective_history.length - 1].toFixed(1)}`}
              sx={{ bgcolor: '#232a31', color: '#e6e9ec', fontFamily: 'monospace' }}
            />
            {lastTurn ? (
              <Chip
                size="small"
                label={`Δ ${lastTurn.objective_delta >= 0 ? '+' : ''}${lastTurn.objective_delta.toFixed(1)} → ${
                  lastTurn.verdict === 'keep_recommended' ? 'KEEP' : 'REJECT'
                }`}
                sx={{
                  bgcolor: lastTurn.objective_delta >= 0 ? '#1b5e20' : '#5d1414',
                  color: lastTurn.objective_delta >= 0 ? '#a5d6a7' : '#ffcdd2',
                  fontWeight: 700,
                }}
              />
            ) : null}
            {sim.status === 'complete' ? (
              <Chip size="small" label="COMPLETE — see debrief below" sx={{ bgcolor: '#00695c', color: '#80cbc4', fontWeight: 700 }} />
            ) : null}
          </Box>

          <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'flex-start' }}>
            <SectionCard
              title="Competing objectives"
              help="All ten metrics matter; cost and risk are inverted (lower is better). Safety below the hard floor triggers an incident with second-order damage."
              sx={{ flex: '1 1 360px' }}
            >
              {(catalog.data?.metrics ?? []).map((m) => (
                <HBar
                  key={m}
                  label={`${m.replace(/_/g, ' ')}${inverted.includes(m) ? ' (lower=better)' : ''}`}
                  value={sim.metrics[m] ?? 0}
                  max={100}
                  color={metricColor(m, sim.metrics[m] ?? 0, inverted)}
                  valueLabel={(sim.metrics[m] ?? 0).toFixed(0)}
                />
              ))}
            </SectionCard>

            <Box sx={{ flex: '1 1 380px', display: 'flex', flexDirection: 'column', gap: 2 }}>
              {sim.status === 'active' ? (
                <SectionCard title={`Turn ${sim.turn + 1}: hypothesis → intervention`}>
                  <TextField
                    label="Hypothesis (falsifiable: metric + direction + magnitude)"
                    placeholder="e.g. 'Adding monitoring will raise safety by ~5 within 2 turns'"
                    multiline
                    minRows={2}
                    fullWidth
                    value={hypothesis}
                    onChange={(e) => setHypothesis(e.target.value)}
                    sx={{ mb: 1.5 }}
                  />
                  <TextField
                    select
                    fullWidth
                    size="small"
                    label="Intervention"
                    value={interventionId}
                    onChange={(e) => setInterventionId(e.target.value)}
                    sx={{ mb: 1 }}
                  >
                    {interventions.map((i) => (
                      <MenuItem key={i.id} value={i.id}>
                        {i.label}
                      </MenuItem>
                    ))}
                  </TextField>
                  <Typography variant="caption" sx={{ color: '#8a949e', display: 'block', mb: 1 }}>
                    {interventions.find((i) => i.id === interventionId)?.description}{' '}
                    <i>{interventions.find((i) => i.id === interventionId)?.second_order}</i>
                  </Typography>
                  {sim.history.length > 0 ? (
                    <FormControlLabel
                      control={<Checkbox size="small" checked={revert} onChange={(e) => setRevert(e.target.checked)} />}
                      label={
                        <Typography variant="caption" sx={{ color: '#ffb74d' }}>
                          Reject previous intervention first (roll back its immediate effects)
                        </Typography>
                      }
                    />
                  ) : null}
                  <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
                    <Button variant="contained" onClick={step} disabled={busy || !hypothesis.trim()}>
                      {busy ? 'Measuring…' : 'Intervene & measure'}
                    </Button>
                  </Box>
                </SectionCard>
              ) : null}

              <SectionCard title="Event log" sx={{ maxHeight: 420, overflowY: 'auto' }}>
                {sim.history.length === 0 ? (
                  <Typography variant="body2" sx={{ color: '#8a949e' }}>
                    No turns yet.
                  </Typography>
                ) : null}
                {[...sim.history].reverse().map((t) => (
                  <Box key={t.turn} sx={{ mb: 1.5, pb: 1, borderBottom: '1px solid #232a31' }}>
                    <Typography variant="caption" sx={{ color: '#4fc3f7', fontWeight: 700 }}>
                      TURN {t.turn} · {t.intervention_id} · Δobj {t.objective_delta >= 0 ? '+' : ''}
                      {t.objective_delta.toFixed(1)}
                      {'  '}
                      <Chip
                        size="small"
                        label={`hypothesis: ${t.hypothesis_assessment.quality}`}
                        sx={{
                          height: 16, fontSize: 9.5, ml: 0.5,
                          bgcolor: t.hypothesis_assessment.quality === 'strong' ? '#1b5e20' : t.hypothesis_assessment.quality === 'directional' ? '#f9a825' : '#5d1414',
                          color: t.hypothesis_assessment.quality === 'directional' ? '#212121' : '#e6e9ec',
                        }}
                      />
                    </Typography>
                    <Typography variant="caption" sx={{ color: '#aab4be', display: 'block', fontStyle: 'italic' }}>
                      “{t.hypothesis}”
                    </Typography>
                    {t.delayed_landed.map((d, i) => (
                      <Typography key={i} variant="caption" sx={{ color: '#9ccc65', display: 'block' }}>
                        ⏲ {d}
                      </Typography>
                    ))}
                    {t.events.map((e, i) => (
                      <Typography key={i} variant="caption" sx={{ color: '#ef9a9a', display: 'block' }}>
                        ⚠ {e}
                      </Typography>
                    ))}
                  </Box>
                ))}
              </SectionCard>
            </Box>
          </Box>

          {sim.debrief ? (
            <SectionCard title="Debrief — decisions mapped to competency evidence">
              <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', mb: 1.5 }}>
                <Chip size="small" label={`objective ${sim.debrief.objective_start} → ${sim.debrief.objective_end} (${sim.debrief.objective_delta >= 0 ? '+' : ''}${sim.debrief.objective_delta})`} sx={{ bgcolor: '#232a31', fontFamily: 'monospace' }} />
                <Chip size="small" label={`${sim.debrief.incidents} incident(s)`} sx={{ bgcolor: sim.debrief.incidents ? '#5d1414' : '#1b5e20', color: sim.debrief.incidents ? '#ffcdd2' : '#a5d6a7' }} />
                <Chip size="small" label={sim.debrief.balanced_finish ? 'balanced finish' : 'unbalanced finish'} sx={{ bgcolor: sim.debrief.balanced_finish ? '#1b5e20' : '#e65100', color: '#e6e9ec' }} />
              </Box>
              {sim.debrief.competency_mappings.map((m) => (
                <Alert
                  key={m.competency_id}
                  severity={m.verdict === 'evidenced' ? 'success' : 'warning'}
                  variant="outlined"
                  sx={{ mb: 1, py: 0.25 }}
                >
                  <b>{m.competency_id}</b> — {m.reason}
                  {m.quotes.map((q, i) => (
                    <Typography key={i} variant="caption" sx={{ display: 'block', fontStyle: 'italic', color: '#aab4be' }}>
                      “{q}”
                    </Typography>
                  ))}
                </Alert>
              ))}
              <Button size="small" onClick={start}>
                Run again (new seed)
              </Button>
            </SectionCard>
          ) : null}
        </>
      ) : null}
    </Box>
  );
}