import { Activity } from 'lucide-react';

import { Head, Link } from '@inertiajs/react';

import PageHeader from '@/Components/layout/PageHeader';
import { Badge } from '@/Components/ui/badge';
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/Components/ui/breadcrumb';
import { Card, CardContent, CardHeader, CardTitle } from '@/Components/ui/card';
import AdminLayout from '@/Layouts/AdminLayout';
import { getAdminStatusVariant } from '@/lib/adminStatusBadge';
import { formatDate, formatNumber } from '@/lib/format';

interface AnalysisRunDetail {
  id: number;
  site_id: number | null;
  site_name: string | null;
  site_domain: string | null;
  status: string;
  before_start: string | null;
  before_end: string | null;
  after_start: string | null;
  after_end: string | null;
  summary: Record<string, unknown> | null;
  error: string | null;
  is_scheduled: boolean;
  started_at: string | null;
  completed_at: string | null;
  duration_seconds: number | null;
  findings_count: number;
  recommendations_count: number;
  ai_jobs_count: number;
  created_at: string;
}

interface Props {
  run: AnalysisRunDetail;
}

const formatDuration = (seconds: number | null) => {
  if (seconds === null) return '—';
  if (seconds < 60) return `${seconds}s`;
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${mins}m ${secs}s`;
};

export default function AnalysisRunsShow({ run }: Props) {
  return (
    <AdminLayout>
      <Head title={`Analysis Run #${run.id}`} />
      <div className="container py-6 space-y-6">
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
                <Link href="/admin">Admin</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
                <Link href={route('admin.analysis-runs.index')}>Analysis Runs</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>Run #{run.id}</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>

        <PageHeader
          title={`Analysis Run #${run.id}`}
          description={`Created ${formatDate(run.created_at)}`}
        />

        <div className="grid gap-6 md:grid-cols-3">
          <div className="md:col-span-1 space-y-4">
            <Card>
              <CardHeader>
                <CardTitle className="text-sm font-medium">Details</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3 text-sm">
                <div>
                  <p className="text-xs text-muted-foreground">Site</p>
                  {run.site_id ? (
                    <a
                      href={route('admin.sites.show', { site: run.site_id })}
                      className="text-primary hover:underline font-medium"
                    >
                      {run.site_name ?? '—'}
                    </a>
                  ) : (
                    <span className="font-medium">{run.site_name ?? '—'}</span>
                  )}
                  {run.site_domain && (
                    <p className="text-xs text-muted-foreground">{run.site_domain}</p>
                  )}
                </div>
                <div>
                  <p className="text-xs text-muted-foreground">Status</p>
                  <Badge variant={getAdminStatusVariant(run.status)}>{run.status}</Badge>
                </div>
                <div>
                  <p className="text-xs text-muted-foreground">Type</p>
                  <p>{run.is_scheduled ? 'Scheduled' : 'Manual'}</p>
                </div>
                <div>
                  <p className="text-xs text-muted-foreground">Duration</p>
                  <p className="font-mono">{formatDuration(run.duration_seconds)}</p>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="text-sm font-medium">Time Windows</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3 text-sm">
                <div>
                  <p className="text-xs text-muted-foreground">Before Period</p>
                  <p className="font-mono text-xs">
                    {run.before_start ?? '—'} → {run.before_end ?? '—'}
                  </p>
                </div>
                <div>
                  <p className="text-xs text-muted-foreground">After Period</p>
                  <p className="font-mono text-xs">
                    {run.after_start ?? '—'} → {run.after_end ?? '—'}
                  </p>
                </div>
                <div>
                  <p className="text-xs text-muted-foreground">Started At</p>
                  <p className="font-mono text-xs">{run.started_at ? formatDate(run.started_at) : '—'}</p>
                </div>
                <div>
                  <p className="text-xs text-muted-foreground">Completed At</p>
                  <p className="font-mono text-xs">{run.completed_at ? formatDate(run.completed_at) : '—'}</p>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="text-sm font-medium">Results</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Findings</span>
                  <span className="font-mono font-medium">{formatNumber(run.findings_count)}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Recommendations</span>
                  <span className="font-mono font-medium">{formatNumber(run.recommendations_count)}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">AI Jobs</span>
                  <span className="font-mono font-medium">{formatNumber(run.ai_jobs_count)}</span>
                </div>
              </CardContent>
            </Card>
          </div>

          <div className="md:col-span-2 space-y-4">
            {run.error && (
              <Card className="border-destructive">
                <CardHeader>
                  <CardTitle className="text-sm font-medium text-destructive">Error</CardTitle>
                </CardHeader>
                <CardContent>
                  <pre className="text-xs font-mono whitespace-pre-wrap break-words text-destructive">{run.error}</pre>
                </CardContent>
              </Card>
            )}

            {run.summary && Object.keys(run.summary).length > 0 && (
              <Card>
                <CardHeader>
                  <div className="flex items-center gap-2">
                    <Activity className="h-4 w-4 text-muted-foreground" />
                    <CardTitle className="text-sm font-medium">Summary</CardTitle>
                  </div>
                </CardHeader>
                <CardContent>
                  <dl className="grid grid-cols-2 gap-3 text-sm">
                    {Object.entries(run.summary).map(([key, value]) => (
                      <div key={key}>
                        <dt className="text-xs text-muted-foreground capitalize">{key.replace(/_/g, ' ')}</dt>
                        <dd className="font-mono font-medium">{String(value)}</dd>
                      </div>
                    ))}
                  </dl>
                </CardContent>
              </Card>
            )}
          </div>
        </div>
      </div>
    </AdminLayout>
  );
}
