import { Card } from './ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
import { AnalysisData } from '../types/analysis';
import { OverviewPanel } from './OverviewPanel';
import { HeatmapView } from './HeatmapView';
import { DarkPatternsList } from './DarkPatternsList';
import { CompliancePanel } from './CompliancePanel';
import { ExportReport } from './ExportReport';
import { BarChart3 } from 'lucide-react';

interface AnalysisResultsProps {
  data: AnalysisData;
}

export function AnalysisResults({ data }: AnalysisResultsProps) {
  return (
    <div className="space-y-6">
      <Card className="p-6 bg-card/40 backdrop-blur-md border border-border shadow-2xl rounded-2xl relative overflow-hidden">
        {/* Decorative background glow */}
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-96 h-96 bg-indigo-500/5 rounded-full blur-3xl -z-10 pointer-events-none" />

        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8 pb-6 border-b border-white/5">
          <div className="flex items-center gap-2">
            <BarChart3 className="w-5 h-5 text-indigo-400 animate-pulse" />
            <h2 className="text-xl font-extrabold bg-gradient-to-r from-white to-slate-300 bg-clip-text text-transparent">
              AI Auditing Diagnostic
            </h2>
          </div>
          <ExportReport data={data} />
        </div>
        
        <Tabs defaultValue="overview" className="w-full">
          <TabsList className="grid w-full grid-cols-2 md:grid-cols-4 bg-slate-900/60 p-1.5 rounded-xl border border-border gap-1 mb-6">
            <TabsTrigger
              value="overview"
              className="rounded-lg text-xs font-semibold py-2.5 transition-all duration-300 data-[state=active]:bg-gradient-to-r data-[state=active]:from-indigo-600 data-[state=active]:to-purple-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=active]:shadow-indigo-500/10 text-slate-400 hover:text-slate-200"
            >
              Overview Summary
            </TabsTrigger>
            <TabsTrigger
              value="heatmap"
              className="rounded-lg text-xs font-semibold py-2.5 transition-all duration-300 data-[state=active]:bg-gradient-to-r data-[state=active]:from-indigo-600 data-[state=active]:to-purple-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=active]:shadow-indigo-500/10 text-slate-400 hover:text-slate-200"
            >
              Diagnostic Heatmap
            </TabsTrigger>
            <TabsTrigger
              value="patterns"
              className="rounded-lg text-xs font-semibold py-2.5 transition-all duration-300 data-[state=active]:bg-gradient-to-r data-[state=active]:from-indigo-600 data-[state=active]:to-purple-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=active]:shadow-indigo-500/10 text-slate-400 hover:text-slate-200"
            >
              Detected Triggers
            </TabsTrigger>
            <TabsTrigger
              value="compliance"
              className="rounded-lg text-xs font-semibold py-2.5 transition-all duration-300 data-[state=active]:bg-gradient-to-r data-[state=active]:from-indigo-600 data-[state=active]:to-purple-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=active]:shadow-indigo-500/10 text-slate-400 hover:text-slate-200"
            >
              CFPB Compliance
            </TabsTrigger>
          </TabsList>
          
          <TabsContent value="overview" className="mt-4 focus-visible:outline-none">
            <OverviewPanel data={data} />
          </TabsContent>
          
          <TabsContent value="heatmap" className="mt-4 focus-visible:outline-none">
            <HeatmapView data={data} />
          </TabsContent>
          
          <TabsContent value="patterns" className="mt-4 focus-visible:outline-none">
            <DarkPatternsList patterns={data.darkPatterns} />
          </TabsContent>
          
          <TabsContent value="compliance" className="mt-4 focus-visible:outline-none">
            <CompliancePanel report={data.complianceReport} />
          </TabsContent>
        </Tabs>
      </Card>
    </div>
  );
}