import { Calendar, CheckCircle2, XCircle, Clock, ChevronDown } from 'lucide-react';

import { useState } from 'react';

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

import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/Components/ui/collapsible';
import { formatDateTime, formatNumber } from '@/lib/format';
import { cn } from '@/lib/utils';

interface BatchJob {
  id: number;
  created_at: string;
  completed_at: string | null;
  status: 'pending' | 'processing' | 'completed' | 'failed';
  total_jobs: number;
  completed_jobs: number;
  failed_jobs: number;
  total_actual_tokens: number | null;
  total_estimated_tokens: number;
  total_actual_cost: number | null;
  total_estimated_cost: number;
}

interface BatchHistoryCardProps {
  batchJob: BatchJob;
  siteId: number;
}

function formatTokens(tokens: number): string {
  if (tokens >= 1_000_000) {
    return `${(tokens / 1_000_000).toFixed(1)}M`;
  }
  if (tokens >= 1_000) {
    return `${(tokens / 1_000).toFixed(1)}K`;
  }
  return formatNumber(tokens);
}

function formatCost(cost: number): string {
  if (cost < 0.01) {
    return '<$0.01';
  }
  return `$${cost.toFixed(2)}`;
}

const STATUS_CONFIG: Record<
  string,
  { label: string; variant: 'default' | 'secondary' | 'success' | 'destructive' }
> = {
  pending: { label: 'Pending', variant: 'default' },
  processing: { label: 'Processing', variant: 'secondary' },
  completed: { label: 'Completed', variant: 'success' },
  failed: { label: 'Failed', variant: 'destructive' },
};

export default function BatchHistoryCard({ batchJob, siteId }: BatchHistoryCardProps) {
  const [detailsOpen, setDetailsOpen] = useState(false);
  const statusConfig = STATUS_CONFIG[batchJob.status] ?? {
    label: batchJob.status,
    variant: 'default' as const,
  };
  const successfulJobs = batchJob.completed_jobs - batchJob.failed_jobs;
  const pendingJobs = batchJob.total_jobs - batchJob.completed_jobs - batchJob.failed_jobs;
  const tokensUsed = batchJob.total_actual_tokens ?? batchJob.total_estimated_tokens;
  const costIncurred = batchJob.total_actual_cost ?? batchJob.total_estimated_cost;
  const progressPercent =
    batchJob.total_jobs > 0 ? Math.round((batchJob.completed_jobs / batchJob.total_jobs) * 100) : 0;
  const hasFailed = batchJob.failed_jobs > 0;

  return (
    <div className="rounded-lg border bg-card p-4">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
        <div className="flex flex-col gap-3 min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <Badge variant={statusConfig.variant}>{statusConfig.label}</Badge>
            <div className="flex items-center gap-1 text-sm text-muted-foreground">
              <Calendar className="h-3.5 w-3.5" />
              <span>{formatDateTime(batchJob.created_at)}</span>
            </div>
          </div>

          <div className="grid grid-cols-2 gap-x-4 gap-y-2 text-sm sm:grid-cols-4">
            <div>
              <p className="text-muted-foreground">Total Jobs</p>
              <p className="font-medium text-foreground">{batchJob.total_jobs}</p>
            </div>
            <div>
              <p className="text-muted-foreground flex items-center gap-1">
                <CheckCircle2 className="h-3.5 w-3.5 text-green-600 dark:text-green-400" />
                Success
              </p>
              <p className="font-medium text-foreground">{successfulJobs}</p>
            </div>
            <div>
              <p className="text-muted-foreground flex items-center gap-1">
                <XCircle className="h-3.5 w-3.5 text-red-600 dark:text-red-400" />
                Failed
              </p>
              <p className="font-medium text-foreground">{batchJob.failed_jobs}</p>
            </div>
            <div>
              <p className="text-muted-foreground flex items-center gap-1">
                <Clock className="h-3.5 w-3.5" />
                Pending
              </p>
              <p className="font-medium text-foreground">{pendingJobs}</p>
            </div>
          </div>

          {batchJob.status === 'processing' && (
            <div className="space-y-1">
              <div className="flex items-center justify-between text-xs">
                <span className="text-muted-foreground">Progress</span>
                <span className="font-medium text-foreground">{progressPercent}%</span>
              </div>
              <div className="h-2 w-full rounded-full bg-muted overflow-hidden">
                <div
                  className="h-full bg-primary transition-all duration-300"
                  style={{ width: `${progressPercent}%` }}
                  role="progressbar"
                  aria-valuenow={progressPercent}
                  aria-valuemin={0}
                  aria-valuemax={100}
                  aria-label={`Batch progress: ${progressPercent}%`}
                />
              </div>
            </div>
          )}

          {hasFailed && batchJob.status === 'completed' && (
            <Collapsible open={detailsOpen} onOpenChange={setDetailsOpen} className="space-y-2">
              <CollapsibleTrigger asChild>
                <button className="flex items-center gap-1.5 text-xs font-medium text-destructive hover:text-destructive/80 transition-colors">
                  <ChevronDown
                    className={cn(
                      'h-3 w-3 transition-transform duration-200',
                      detailsOpen && 'rotate-180',
                    )}
                  />
                  Show Failed Drafts
                </button>
              </CollapsibleTrigger>
              <CollapsibleContent className="bg-destructive/5 border border-destructive/20 rounded p-2 text-xs">
                <p className="text-muted-foreground mb-1">
                  {successfulJobs} of {batchJob.total_jobs} published successfully,{' '}
                  {batchJob.failed_jobs} failed
                </p>
                <p className="text-destructive">
                  Check the batch details page for error information on failed jobs.
                </p>
              </CollapsibleContent>
            </Collapsible>
          )}
        </div>

        <div className="flex items-center gap-4 sm:shrink-0">
          <div className="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
            <div className="text-right">
              <p className="text-muted-foreground">Tokens</p>
              <p className="font-semibold text-foreground">{formatTokens(tokensUsed)}</p>
            </div>
            <div className="text-right">
              <p className="text-muted-foreground">Cost</p>
              <p className="font-semibold text-foreground">{formatCost(costIncurred)}</p>
            </div>
          </div>
          <Button variant="outline" size="sm" asChild>
            <Link href={route('batch-ai.show', [siteId, batchJob.id])}>View Details</Link>
          </Button>
        </div>
      </div>
    </div>
  );
}