import { useState } from 'react';
import { useMutation, useQuery } from '@tanstack/react-query';
import { analysisApi } from '../api/client';
import { Rocket, CheckCircle, AlertCircle, ChevronDown, ChevronUp, RefreshCw, Inbox } from 'lucide-react';
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts';
import type { BatchAnalysisResult } from '../types';

export function Batch() {
  const [companiesInput, setCompaniesInput] = useState('');
  const [maxWorkers, setMaxWorkers] = useState(3);
  const [result, setResult] = useState<BatchAnalysisResult | null>(null);
  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());

  const jobsQuery = useQuery({
    queryKey: ['jobs'],
    queryFn: () => analysisApi.listJobs(undefined, 20),
  });

  const mutation = useMutation({
    mutationFn: ({ companies, workers }: { companies: string[]; workers: number }) =>
      analysisApi.analyzeBatch(companies, workers),
    onSuccess: (data) => {
      setResult(data);
      jobsQuery.refetch();
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const companies = companiesInput
      .split(/[,\n]/)
      .map((c) => c.trim())
      .filter((c) => c.length > 0);

    if (companies.length > 0) {
      mutation.mutate({ companies, workers: maxWorkers });
    }
  };

  const toggleExpand = (company: string) => {
    const newExpanded = new Set(expandedItems);
    if (newExpanded.has(company)) {
      newExpanded.delete(company);
    } else {
      newExpanded.add(company);
    }
    setExpandedItems(newExpanded);
  };

  const chartData = result?.results.map((r) => ({
    name: r.company_name.toUpperCase(),
    patents: r.patent_count,
    success: r.success,
  }));

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h2 className="text-xl font-semibold text-text-primary border-b-2 border-primary/30 pb-2 mb-2">
          Batch Company Analysis
        </h2>
        <p className="text-text-secondary">
          Analyze multiple companies simultaneously for comparative insights.
        </p>
      </div>

      {/* Input Form */}
      <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="md:col-span-2">
          <textarea
            value={companiesInput}
            onChange={(e) => setCompaniesInput(e.target.value)}
            placeholder="Enter company names (one per line or comma-separated):&#10;nvidia&#10;amd&#10;intel&#10;qualcomm"
            rows={6}
            className="w-full bg-bg-card/80 border border-primary/30 rounded-xl px-4 py-3 text-text-primary placeholder-text-secondary/50 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all resize-none"
          />
        </div>

        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-text-secondary mb-2">
              Concurrent Workers
            </label>
            <input
              type="range"
              min={1}
              max={5}
              value={maxWorkers}
              onChange={(e) => setMaxWorkers(Number(e.target.value))}
              className="w-full accent-primary"
            />
            <div className="text-center text-text-primary font-semibold">{maxWorkers}</div>
          </div>

          <button
            type="submit"
            disabled={mutation.isPending || !companiesInput.trim()}
            className="w-full bg-gradient-to-r from-primary to-primary-dark text-white font-semibold py-3 px-6 rounded-xl hover:shadow-lg hover:shadow-primary/30 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
          >
            {mutation.isPending ? (
              <div className="animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-white"></div>
            ) : (
              <>
                <Rocket size={18} />
                Run Batch Analysis
              </>
            )}
          </button>
        </div>
      </form>

      {/* Progress */}
      {mutation.isPending && (
        <div className="bg-bg-card/60 border border-primary/15 rounded-xl p-4">
          <div className="flex items-center gap-2 text-secondary">
            <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-secondary"></div>
            <span>Analyzing companies...</span>
          </div>
        </div>
      )}

      {/* Error */}
      {mutation.isError && (
        <div className="bg-error/10 border border-error/20 rounded-xl px-4 py-3">
          <div className="flex items-center gap-2 text-error">
            <AlertCircle size={18} />
            <span className="font-semibold">Batch analysis failed</span>
          </div>
          <p className="text-text-secondary text-sm mt-1 ml-7">
            {mutation.error instanceof Error ? mutation.error.message : 'An unexpected error occurred.'}
            {' '}Check your connection and try again.
          </p>
          <div className="ml-7 mt-2 flex items-center gap-3">
            <button
              onClick={() => {
                const companies = companiesInput
                  .split(/[,\n]/)
                  .map((c) => c.trim())
                  .filter((c) => c.length > 0);
                if (companies.length > 0) {
                  mutation.mutate({ companies, workers: maxWorkers });
                }
              }}
              className="text-sm text-primary hover:text-primary-dark underline flex items-center gap-1"
            >
              <RefreshCw size={14} />
              Retry
            </button>
            <button
              onClick={() => mutation.reset()}
              className="text-sm text-text-secondary hover:text-text-primary underline"
            >
              Dismiss
            </button>
          </div>
        </div>
      )}

      {/* Results */}
      {result && (
        <div className="space-y-6">
          {/* Summary Metrics */}
          <div>
            <h3 className="text-lg font-semibold text-text-primary border-b-2 border-primary/30 pb-2 mb-4">
              Results Summary
            </h3>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <SummaryCard label="Total Companies" value={result.total_companies} />
              <SummaryCard label="Successful" value={result.successful} color="success" />
              <SummaryCard label="Failed" value={result.failed} color="error" />
              <SummaryCard
                label="Success Rate"
                value={`${Math.round((result.successful / result.total_companies) * 100)}%`}
              />
            </div>
          </div>

          {/* Chart */}
          {chartData && chartData.length > 0 && (
            <div className="bg-bg-card/60 border border-primary/15 rounded-2xl p-6">
              <ResponsiveContainer width="100%" height={300}>
                <BarChart data={chartData}>
                  <XAxis dataKey="name" stroke="#94a3b8" fontSize={12} />
                  <YAxis stroke="#94a3b8" fontSize={12} />
                  <Tooltip
                    contentStyle={{
                      backgroundColor: '#1e293b',
                      border: '1px solid rgba(99, 102, 241, 0.3)',
                      borderRadius: '8px',
                    }}
                    labelStyle={{ color: '#f8fafc' }}
                  />
                  <Bar dataKey="patents" radius={[4, 4, 0, 0]}>
                    {chartData.map((entry, index) => (
                      <Cell
                        key={`cell-${index}`}
                        fill={entry.success ? '#10b981' : '#ef4444'}
                      />
                    ))}
                  </Bar>
                </BarChart>
              </ResponsiveContainer>
            </div>
          )}

          {/* Detailed Results */}
          <div>
            <h3 className="text-lg font-semibold text-text-primary border-b-2 border-primary/30 pb-2 mb-4">
              Detailed Results
            </h3>
            <div className="space-y-3">
              {result.results.map((r) => (
                <div
                  key={r.company_name}
                  className="bg-bg-card/60 border border-primary/15 rounded-xl overflow-hidden"
                >
                  <button
                    onClick={() => toggleExpand(r.company_name)}
                    className="w-full flex items-center justify-between p-4 hover:bg-bg-card-hover transition-colors"
                  >
                    <div className="flex items-center gap-3">
                      {r.success ? (
                        <CheckCircle className="text-success" size={20} />
                      ) : (
                        <AlertCircle className="text-error" size={20} />
                      )}
                      <span className="font-semibold text-text-primary">
                        {r.company_name.toUpperCase()}
                      </span>
                      <span className="text-text-secondary">
                        {r.patent_count} patents
                      </span>
                    </div>
                    {expandedItems.has(r.company_name) ? (
                      <ChevronUp className="text-text-secondary" size={20} />
                    ) : (
                      <ChevronDown className="text-text-secondary" size={20} />
                    )}
                  </button>
                  {expandedItems.has(r.company_name) && (
                    <div className="border-t border-primary/10 p-4 bg-bg-dark/40">
                      {r.success ? (
                        <div className="text-text-primary whitespace-pre-wrap leading-relaxed">
                          {r.analysis}
                        </div>
                      ) : (
                        <div className="text-error">{r.error}</div>
                      )}
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* Job History */}
      <div>
        <h3 className="text-lg font-semibold text-text-primary border-b-2 border-primary/30 pb-2 mb-4">
          Job History
        </h3>

        {/* Loading skeleton */}
        {jobsQuery.isLoading && (
          <div className="space-y-3">
            {[...Array(3)].map((_, i) => (
              <div
                key={i}
                className="bg-bg-card/60 border border-primary/15 rounded-xl p-4 animate-pulse"
              >
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="h-5 w-5 rounded-full bg-primary/20" />
                    <div className="h-4 w-32 rounded bg-primary/20" />
                    <div className="h-4 w-20 rounded bg-primary/10" />
                  </div>
                  <div className="h-6 w-20 rounded-full bg-primary/15" />
                </div>
                <div className="mt-3 flex gap-4">
                  <div className="h-3 w-24 rounded bg-primary/10" />
                  <div className="h-3 w-16 rounded bg-primary/10" />
                </div>
              </div>
            ))}
          </div>
        )}

        {/* Job history error */}
        {jobsQuery.isError && (
          <div className="bg-error/10 border border-error/20 rounded-xl px-4 py-3">
            <div className="flex items-center gap-2 text-error">
              <AlertCircle size={18} />
              <span className="font-semibold">Failed to load job history</span>
            </div>
            <p className="text-text-secondary text-sm mt-1 ml-7">
              {jobsQuery.error instanceof Error ? jobsQuery.error.message : 'Could not retrieve past jobs.'}
            </p>
            <button
              onClick={() => jobsQuery.refetch()}
              className="ml-7 mt-2 text-sm text-primary hover:text-primary-dark underline flex items-center gap-1"
            >
              <RefreshCw size={14} />
              Retry
            </button>
          </div>
        )}

        {/* Empty state */}
        {jobsQuery.isSuccess && jobsQuery.data.length === 0 && !result && (
          <div className="bg-bg-card/60 border border-primary/15 border-dashed rounded-xl p-8 text-center">
            <Inbox className="mx-auto text-text-secondary/40 mb-3" size={40} />
            <p className="text-text-secondary font-medium">No batch jobs yet</p>
            <p className="text-text-secondary/70 text-sm mt-1">
              Submit a batch analysis above to get started. Your job history will appear here.
            </p>
          </div>
        )}

        {/* Job list */}
        {jobsQuery.isSuccess && jobsQuery.data.length > 0 && (
          <div className="space-y-3">
            {jobsQuery.data.map((job) => (
              <div
                key={job.job_id}
                className="bg-bg-card/60 border border-primary/15 rounded-xl p-4"
              >
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    {job.status === 'completed' && <CheckCircle className="text-success" size={18} />}
                    {job.status === 'failed' && <AlertCircle className="text-error" size={18} />}
                    {(job.status === 'pending' || job.status === 'running') && (
                      <div className="animate-spin rounded-full h-[18px] w-[18px] border-t-2 border-b-2 border-secondary" />
                    )}
                    <span className="font-mono text-sm text-text-primary">{job.job_id.slice(0, 8)}</span>
                    <span className="text-text-secondary text-sm">
                      {job.total_companies} {job.total_companies === 1 ? 'company' : 'companies'}
                    </span>
                  </div>
                  <span
                    className={`text-xs font-semibold px-2.5 py-1 rounded-full ${
                      job.status === 'completed'
                        ? 'bg-success/15 text-success'
                        : job.status === 'failed'
                          ? 'bg-error/15 text-error'
                          : 'bg-secondary/15 text-secondary'
                    }`}
                  >
                    {job.status}
                  </span>
                </div>
                {(job.status === 'running' || job.status === 'pending') && job.total_companies > 0 && (
                  <div className="mt-3">
                    <div className="flex items-center justify-between text-xs text-text-secondary mb-1">
                      <span>Progress</span>
                      <span>{job.completed_companies}/{job.total_companies}</span>
                    </div>
                    <div className="h-1.5 bg-bg-dark rounded-full overflow-hidden">
                      <div
                        className="h-full bg-gradient-to-r from-primary to-secondary rounded-full transition-all duration-300"
                        style={{ width: `${(job.completed_companies / job.total_companies) * 100}%` }}
                      />
                    </div>
                  </div>
                )}
                {job.status === 'failed' && job.error && (
                  <p className="mt-2 text-sm text-error/80">{job.error}</p>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function SummaryCard({
  label,
  value,
  color,
}: {
  label: string;
  value: number | string;
  color?: 'success' | 'error';
}) {
  const colorClass = color === 'success' ? 'text-success' : color === 'error' ? 'text-error' : '';

  return (
    <div className="bg-gradient-to-br from-primary/10 to-secondary/10 border border-primary/20 rounded-xl p-4 text-center">
      <div
        className={`text-2xl font-bold ${
          colorClass || 'bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent'
        }`}
      >
        {value}
      </div>
      <div className="text-sm text-text-secondary uppercase tracking-wide mt-1">{label}</div>
    </div>
  );
}
