import { useState } from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Alert from '@mui/material/Alert';
import LinearProgress from '@mui/material/LinearProgress';
import CircularProgress from '@mui/material/CircularProgress';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';
import { Rocket, ArrowRight } from 'lucide-react';
import {
  getOverview,
  getFunnel,
  getAlerts,
  generateDataset,
  runPipeline,
  usePoll,
} from '../services/labeleval';
import { useLabelEval, resolvePageId } from '../context/LabelEvalContext';
import VerificationFunnel from '../components/labeleval/VerificationFunnel';
import QueueStatus from '../components/labeleval/QueueStatus';
import {
  MetricCard,
  SectionCard,
  StatusChip,
  LoadingBox,
  ErrorNote,
  EmptyState,
  fmtInt,
  fmtPct,
  fmtNum,
} from '../components/labeleval/shared';

export default function OverviewPage() {
  const { stream, navigate, setActiveDatasetId } = useLabelEval();
  const overview = usePoll(getOverview, 3000);
  const funnel = usePoll(getFunnel, 5000);
  const alerts = usePoll(getAlerts, 5000);
  const [bootstrapping, setBootstrapping] = useState(false);
  const [bootError, setBootError] = useState<string | null>(null);

  const data = overview.data;
  const pipeline = stream?.pipeline ?? null;
  const counters = data?.counters;
  const allZero =
    counters !== undefined && Object.values(counters).every((v) => v === 0);

  const bootstrap = async () => {
    setBootstrapping(true);
    setBootError(null);
    try {
      const ds = await generateDataset({ num_sequences: 8, frames_per_sequence: 25, seed: 42 });
      setActiveDatasetId(ds.dataset_id);
      await runPipeline(ds.dataset_id);
      overview.refresh();
    } catch (err) {
      setBootError(err instanceof Error ? err.message : String(err));
    } finally {
      setBootstrapping(false);
    }
  };

  if (overview.loading && !data) return <LoadingBox label="Loading overview…" />;

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

      {pipeline?.running ? (
        <Alert severity="info" icon={<CircularProgress size={18} />} sx={{ bgcolor: '#12314a' }}>
          Pipeline running — stage: <strong>{pipeline.stage}</strong>. Counters update live.
          <LinearProgress sx={{ mt: 1, height: 6, borderRadius: 1 }} />
        </Alert>
      ) : null}

      {data && allZero && !pipeline?.running ? (
        <SectionCard title="Welcome to Sensorflow Studio">
          <EmptyState
            title="No data yet"
            message="The evaluation platform has not processed any frames. Generate a synthetic multi-sensor dataset and run the full label-evaluation pipeline to see the platform in action."
            action={
              <Box>
                {bootError ? (
                  <Alert severity="error" variant="outlined" sx={{ mb: 1 }}>
                    {bootError}
                  </Alert>
                ) : null}
                <Button
                  variant="contained"
                  size="large"
                  startIcon={bootstrapping ? <CircularProgress size={18} color="inherit" /> : <Rocket size={18} />}
                  disabled={bootstrapping}
                  onClick={() => void bootstrap()}
                  title="Create a small synthetic multi-sensor dataset and run the full label-evaluation pipeline"
                  aria-label="Generate synthetic dataset and run pipeline"
                >
                  {bootstrapping ? 'Generating & starting…' : 'Generate synthetic dataset & run pipeline'}
                </Button>
              </Box>
            }
          />
        </SectionCard>
      ) : null}

      {counters ? (
        <Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>
          <MetricCard label="Frames processed" value={fmtInt(counters.frames_processed)} info="Sensor frames the pipeline has ingested and pushed through auto-labeling." />
          <MetricCard label="Auto-labeled" value={fmtInt(counters.auto_labeled)} info="Candidate labels produced by the auto-labeler, before any quality gating." />
          <MetricCard label="Auto-graded" value={fmtInt(counters.auto_graded)} accent="#66bb6a" term="status_auto_graded" />
          <MetricCard label="Flagged" value={fmtInt(counters.flagged)} accent="#ffa726" term="status_flagged" />
          <MetricCard label="Verified" value={fmtInt(counters.verified)} accent="#66bb6a" term="status_verified" />
          <MetricCard label="HITL" value={fmtInt(counters.in_hitl)} accent="#42a5f5" info="Labels currently sitting in the human review queue." />
          <MetricCard label="Rejected" value={fmtInt(counters.rejected)} accent="#ef5350" term="status_rejected" />
          <MetricCard label="Rare events" value={fmtInt(counters.rare_events)} accent="#ef5350" info="Samples flagged as rare/anomalous by the ensemble detectors — candidates for targeted training data." />
        </Box>
      ) : null}

      {data ? (
        <Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>
          <MetricCard label="Precision" value={fmtPct(data.metrics.precision)} term="precision" />
          <MetricCard label="Recall" value={fmtPct(data.metrics.recall)} term="recall" />
          <MetricCard label="Safety recall" value={fmtPct(data.metrics.safety_critical_recall)} accent="#ffa726" term="safety_recall" />
          <MetricCard label="mAP (3D)" value={fmtPct(data.metrics.map_3d)} term="map_3d" />
          <MetricCard label="3D IoU" value={fmtNum(data.metrics.mean_iou_3d)} term="iou_3d" />
          <MetricCard label="IDF1" value={fmtPct(data.metrics.idf1)} term="idf1" />
          <MetricCard label="Anomaly rate" value={fmtPct(data.metrics.anomaly_rate)} term="anomaly_rate" />
          <MetricCard label="Grader consensus" value={fmtPct(data.metrics.grader_consensus)} term="grader_consensus" />
          <MetricCard label="Verification rate" value={fmtPct(data.verification_rate)} accent="#66bb6a" term="verification_rate" />
          <MetricCard label="Automation rate" value={fmtPct(data.automation_rate)} term="automation_rate" />
          <MetricCard label="Process units" value={fmtInt(data.process_units_total)} sub="total consumed" term="process_units" />
        </Box>
      ) : null}

      <VerificationFunnel funnel={funnel.data} />

      <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'flex-start' }}>
        <SectionCard
          title={`Alerts (${alerts.data?.alerts.length ?? 0})`}
          help="Active alerts from anomaly detection, regression tracking and distribution-shift checks. Hover a severity chip for what it means; Evidence deep-links to the page that raised the alert with the offending entity selected."
          sx={{ flex: '1 1 420px' }}
        >
          {!alerts.data || alerts.data.alerts.length === 0 ? (
            <Typography variant="body2" sx={{ color: '#8a949e' }}>
              No active alerts — anomaly, regression and shift monitors are all quiet. Alerts will appear here as the
              pipeline processes data.
            </Typography>
          ) : (
            <Table size="small">
              <TableBody>
                {alerts.data.alerts.map((a) => (
                  <TableRow key={a.alert_id} hover>
                    <TableCell sx={{ width: 90 }}>
                      <StatusChip status={a.severity} />
                    </TableCell>
                    <TableCell>
                      <Typography variant="body2">{a.message}</Typography>
                      <Typography variant="caption" sx={{ color: '#8a949e' }}>
                        {a.kind} · {new Date(a.created_at).toLocaleString()}
                      </Typography>
                    </TableCell>
                    <TableCell align="right" sx={{ width: 130 }}>
                      <Button
                        size="small"
                        variant="outlined"
                        endIcon={<ArrowRight size={14} />}
                        onClick={() => navigate(resolvePageId(a.evidence_link.page), a.evidence_link.id)}
                        title={`Open ${a.evidence_link.page} with this alert’s evidence selected`}
                        aria-label="Open alert evidence"
                      >
                        Evidence
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </SectionCard>
        <Box sx={{ flex: '1 1 380px' }}>
          <QueueStatus queue={stream?.pipeline.queue ?? undefined} />
        </Box>
      </Box>
    </Box>
  );
}