'use client';

import { useEffect, useState, use } from 'react';
import Link from 'next/link';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  ArrowLeft,
  AlertTriangle,
  Loader2,
  CheckCircle2,
  XCircle,
} from 'lucide-react';
import { AnalysisMarkdown } from '@/components/analyzer/analysis-markdown';
import { useUserTimezone } from '@/lib/hooks/use-user-timezone';

type Report = {
  id: string;
  generatedAt: string;
  reportTitle: string | null;
  ticketCount: number;
  status: 'pending' | 'running' | 'complete' | 'failed';
  errorMessage: string | null;
  estimatedCostUsd: number | null;
  modelUsed: string | null;
  totalInputTokens: number | null;
  totalOutputTokens: number | null;
  itglueContextIncluded: boolean | null;
  dateRangeActual: { earliest: string | null; latest: string | null } | null;
  categoryDistribution: Record<string, number> | null;
  clientDistribution: Record<string, number> | null;
  resolutionPathDistribution: Record<string, number> | null;
  rootCauseDistribution: Record<string, number> | null;
  documentationGaps:
    | Array<{
        gap: string;
        frequency: number;
        example_ticket_numbers: string[];
        evidence: string;
        itglue_check: 'no_doc_exists' | 'doc_exists_but_unused' | 'unable_to_verify';
      }>
    | null;
  processGaps:
    | Array<{
        gap: string;
        frequency: number;
        severity: 'low' | 'medium' | 'high';
        example_ticket_numbers: string[];
        evidence: string;
      }>
    | null;
  clientPatterns:
    | Array<{
        client: string;
        pattern: string;
        frequency: number;
        example_ticket_numbers: string[];
      }>
    | null;
  recurrenceClusters:
    | Array<{ theme: string; ticket_numbers: string[]; summary: string }>
    | null;
  systemicObservations:
    | Array<{ observation: string; evidence: string; severity: 'low' | 'medium' | 'high' }>
    | null;
  recommendedActions:
    | Array<{
        action: string;
        rationale: string;
        priority: 'low' | 'medium' | 'high';
        type: 'documentation' | 'process' | 'training' | 'tooling';
      }>
    | null;
  narrativeSummary: string | null;
  executiveSummary: string | null;
};

const SEVERITY_TONE: Record<string, string> = {
  high: 'border-red-500 bg-red-500/5',
  medium: 'border-amber-500 bg-amber-500/5',
  low: 'border-blue-500 bg-blue-500/5',
};

const ITGLUE_CHECK_TONE: Record<string, string> = {
  no_doc_exists: 'text-red-600 border-red-300 dark:text-red-400 dark:border-red-800',
  doc_exists_but_unused:
    'text-amber-600 border-amber-300 dark:text-amber-400 dark:border-amber-800',
  unable_to_verify: 'text-muted-foreground',
};

const ITGLUE_CHECK_LABEL: Record<string, string> = {
  no_doc_exists: 'No doc exists',
  doc_exists_but_unused: 'Doc exists but unused',
  unable_to_verify: 'Unable to verify',
};

function MiniBars({ data }: { data: Record<string, number> | null }) {
  if (!data || Object.keys(data).length === 0) return null;
  const entries = Object.entries(data).sort((a, b) => b[1] - a[1]);
  const max = entries[0]?.[1] ?? 1;
  return (
    <div className="space-y-1.5">
      {entries.map(([key, val]) => (
        <div key={key} className="text-xs">
          <div className="flex justify-between">
            <span className="truncate">{key}</span>
            <span className="text-muted-foreground tabular-nums ml-2">{val}</span>
          </div>
          <div className="h-1.5 bg-muted rounded overflow-hidden">
            <div
              className="h-full bg-primary rounded"
              style={{ width: `${Math.round((val / max) * 100)}%` }}
            />
          </div>
        </div>
      ))}
    </div>
  );
}

export default function AggregateReportPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = use(params);
  const tz = useUserTimezone();
  const [report, setReport] = useState<Report | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    let timer: ReturnType<typeof setTimeout> | null = null;
    async function load() {
      try {
        const res = await fetch(`/api/analyzer/aggregate-reports/${id}`);
        if (!res.ok) {
          throw new Error(`Request failed: ${res.status}`);
        }
        const { report } = (await res.json()) as { report: Report };
        if (cancelled) return;
        setReport(report);
        setLoading(false);
        if (report.status === 'pending' || report.status === 'running') {
          timer = setTimeout(load, 3000);
        }
      } catch (err) {
        if (cancelled) return;
        setError(err instanceof Error ? err.message : 'Unknown error');
        setLoading(false);
      }
    }
    void load();
    return () => {
      cancelled = true;
      if (timer) clearTimeout(timer);
    };
  }, [id]);

  if (loading && !report)
    return <div className="p-6 text-sm text-muted-foreground">Loading…</div>;
  if (error)
    return <div className="p-6 text-sm text-destructive">{error}</div>;
  if (!report) return null;

  return (
    <div className="container mx-auto px-4 py-6 space-y-6 max-w-screen-xl">
      <div className="flex items-center gap-2">
        <Button variant="ghost" size="sm" asChild>
          <Link href="/analyzer/reports">
            <ArrowLeft className="w-4 h-4 mr-1" />
            All reports
          </Link>
        </Button>
      </div>

      {/* Header */}
      <Card>
        <CardHeader>
          <div className="flex items-start justify-between gap-4 flex-wrap">
            <div className="space-y-1 min-w-0">
              <CardTitle className="text-2xl">
                {report.reportTitle ?? `Aggregate report · ${report.ticketCount} tickets`}
              </CardTitle>
              <p className="text-sm text-muted-foreground">
                {new Date(report.generatedAt).toLocaleString(undefined, { timeZone: tz })}
                {report.modelUsed && ` · ${report.modelUsed}`}
                {report.estimatedCostUsd !== null && (
                  <> · ${report.estimatedCostUsd.toFixed(4)}</>
                )}
                {report.itglueContextIncluded !== null && (
                  <>
                    {' · '}IT Glue context: {report.itglueContextIncluded ? 'included' : 'no'}
                  </>
                )}
                {report.dateRangeActual?.earliest && report.dateRangeActual?.latest && (
                  <>
                    {' · '}
                    {new Date(report.dateRangeActual.earliest).toLocaleDateString(undefined, { timeZone: tz })}
                    {' – '}
                    {new Date(report.dateRangeActual.latest).toLocaleDateString(undefined, { timeZone: tz })}
                  </>
                )}
              </p>
            </div>
            <StatusBadge status={report.status} />
          </div>
        </CardHeader>
      </Card>

      {report.status === 'failed' && report.errorMessage && (
        <Card className="border-destructive/40 bg-destructive/5">
          <CardContent className="pt-6 flex items-start gap-3">
            <AlertTriangle className="w-5 h-5 text-destructive shrink-0 mt-0.5" />
            <div>
              <p className="text-sm font-medium">Report generation failed</p>
              <p className="text-sm text-muted-foreground mt-1 font-mono whitespace-pre-wrap">
                {report.errorMessage}
              </p>
            </div>
          </CardContent>
        </Card>
      )}

      {(report.status === 'pending' || report.status === 'running') && (
        <Card className="border-primary/40 bg-primary/5">
          <CardContent className="pt-6 flex items-center gap-3">
            <Loader2 className="w-5 h-5 animate-spin text-primary" />
            <div className="text-sm">
              {report.status === 'pending' ? 'Queued.' : 'Running.'} The page will
              refresh automatically when the report is ready (typically 30–90s).
            </div>
          </CardContent>
        </Card>
      )}

      {/* Executive summary */}
      {report.executiveSummary && (
        <Card className="border-primary/40">
          <CardHeader>
            <CardTitle className="text-base text-primary uppercase tracking-wide font-semibold">
              Executive Summary
            </CardTitle>
          </CardHeader>
          <CardContent>
            <AnalysisMarkdown className="text-base">
              {report.executiveSummary}
            </AnalysisMarkdown>
          </CardContent>
        </Card>
      )}

      {/* Distributions */}
      {(report.categoryDistribution ||
        report.rootCauseDistribution ||
        report.resolutionPathDistribution ||
        report.clientDistribution) && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <Card>
            <CardHeader>
              <CardTitle className="text-sm uppercase tracking-wide">Categories</CardTitle>
            </CardHeader>
            <CardContent>
              <MiniBars data={report.categoryDistribution} />
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle className="text-sm uppercase tracking-wide">Root cause</CardTitle>
            </CardHeader>
            <CardContent>
              <MiniBars data={report.rootCauseDistribution} />
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle className="text-sm uppercase tracking-wide">Resolution</CardTitle>
            </CardHeader>
            <CardContent>
              <MiniBars data={report.resolutionPathDistribution} />
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle className="text-sm uppercase tracking-wide">Clients</CardTitle>
            </CardHeader>
            <CardContent>
              <MiniBars data={report.clientDistribution} />
            </CardContent>
          </Card>
        </div>
      )}

      {/* Documentation gaps */}
      {report.documentationGaps && report.documentationGaps.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Documentation gaps</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {report.documentationGaps.map((g, i) => (
              <div
                key={i}
                className="rounded-lg border-l-4 border-blue-400 bg-blue-500/5 p-3"
              >
                <div className="flex items-center gap-2 flex-wrap">
                  <Badge
                    variant="outline"
                    className={ITGLUE_CHECK_TONE[g.itglue_check] ?? ''}
                  >
                    {ITGLUE_CHECK_LABEL[g.itglue_check]}
                  </Badge>
                  <Badge variant="secondary">{g.frequency}×</Badge>
                  <p className="text-sm font-medium">{g.gap}</p>
                </div>
                <p className="text-xs text-muted-foreground mt-2">{g.evidence}</p>
                <div className="mt-2 text-xs flex flex-wrap gap-1">
                  {g.example_ticket_numbers.map((tn) => (
                    <Link
                      key={tn}
                      href={`/analyzer/ticket/${encodeURIComponent(tn)}`}
                      className="font-mono underline text-muted-foreground hover:text-foreground"
                    >
                      {tn}
                    </Link>
                  ))}
                </div>
              </div>
            ))}
          </CardContent>
        </Card>
      )}

      {/* Process gaps */}
      {report.processGaps && report.processGaps.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Process gaps</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {report.processGaps.map((g, i) => (
              <div
                key={i}
                className={`rounded-lg border-l-4 p-3 ${SEVERITY_TONE[g.severity] ?? ''}`}
              >
                <div className="flex items-center gap-2 flex-wrap">
                  <Badge
                    variant={
                      g.severity === 'high'
                        ? 'destructive'
                        : g.severity === 'medium'
                          ? 'default'
                          : 'secondary'
                    }
                  >
                    {g.severity}
                  </Badge>
                  <Badge variant="secondary">{g.frequency}×</Badge>
                  <p className="text-sm font-medium">{g.gap}</p>
                </div>
                <p className="text-xs text-muted-foreground mt-2">{g.evidence}</p>
                <div className="mt-2 text-xs flex flex-wrap gap-1">
                  {g.example_ticket_numbers.map((tn) => (
                    <Link
                      key={tn}
                      href={`/analyzer/ticket/${encodeURIComponent(tn)}`}
                      className="font-mono underline text-muted-foreground hover:text-foreground"
                    >
                      {tn}
                    </Link>
                  ))}
                </div>
              </div>
            ))}
          </CardContent>
        </Card>
      )}

      {/* Recurrence clusters */}
      {report.recurrenceClusters && report.recurrenceClusters.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Recurrence clusters</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {report.recurrenceClusters.map((c, i) => (
              <div key={i} className="border rounded-lg p-4">
                <div className="font-medium text-sm mb-2">{c.theme}</div>
                <AnalysisMarkdown className="text-sm">{c.summary}</AnalysisMarkdown>
                <div className="mt-2 text-xs flex flex-wrap gap-1">
                  {c.ticket_numbers.map((tn) => (
                    <Link
                      key={tn}
                      href={`/analyzer/ticket/${encodeURIComponent(tn)}`}
                      className="font-mono underline text-muted-foreground hover:text-foreground"
                    >
                      {tn}
                    </Link>
                  ))}
                </div>
              </div>
            ))}
          </CardContent>
        </Card>
      )}

      {/* Recommended actions */}
      {report.recommendedActions && report.recommendedActions.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Recommended actions</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-3 md:grid-cols-2">
            {report.recommendedActions
              .slice()
              .sort(
                (a, b) =>
                  ['low', 'medium', 'high'].indexOf(b.priority) -
                  ['low', 'medium', 'high'].indexOf(a.priority)
              )
              .map((a, i) => (
                <div key={i} className="border rounded-lg p-4 space-y-2">
                  <div className="flex items-center gap-2">
                    <Badge
                      variant={
                        a.priority === 'high'
                          ? 'destructive'
                          : a.priority === 'medium'
                            ? 'default'
                            : 'secondary'
                      }
                    >
                      {a.priority}
                    </Badge>
                    <Badge variant="outline" className="capitalize">
                      {a.type}
                    </Badge>
                  </div>
                  <AnalysisMarkdown className="text-sm prose-p:font-medium">
                    {a.action}
                  </AnalysisMarkdown>
                  <AnalysisMarkdown className="text-xs text-muted-foreground">
                    {a.rationale}
                  </AnalysisMarkdown>
                </div>
              ))}
          </CardContent>
        </Card>
      )}

      {/* Narrative summary */}
      {report.narrativeSummary && (
        <Card>
          <CardHeader>
            <CardTitle>Narrative summary</CardTitle>
          </CardHeader>
          <CardContent>
            <AnalysisMarkdown className="text-base">
              {report.narrativeSummary}
            </AnalysisMarkdown>
          </CardContent>
        </Card>
      )}
    </div>
  );
}

function StatusBadge({ status }: { status: Report['status'] }) {
  if (status === 'complete')
    return (
      <Badge className="bg-emerald-500/10 text-emerald-700 dark:text-emerald-400" variant="outline">
        <CheckCircle2 className="w-3 h-3 mr-1" />
        Complete
      </Badge>
    );
  if (status === 'failed')
    return (
      <Badge variant="destructive">
        <XCircle className="w-3 h-3 mr-1" />
        Failed
      </Badge>
    );
  return (
    <Badge variant="secondary">
      <Loader2 className="w-3 h-3 mr-1 animate-spin" />
      {status === 'pending' ? 'Queued' : 'Running'}
    </Badge>
  );
}
