src/app/components/CompliancePanel.tsx

import { ComplianceReport } from '../types/analysis';
import { Shield, AlertCircle, CheckCircle2, FileCheck } from 'lucide-react';
import { Progress } from './ui/progress';
import { Card } from './ui/card';
import { Badge } from './ui/badge';

interface CompliancePanelProps {
  report: ComplianceReport;
}

export function CompliancePanel({ report }: CompliancePanelProps) {
  const getComplianceColor = () => {
    if (report.cfpbAlignment >= 80) return 'text-emerald-400';
    if (report.cfpbAlignment >= 60) return 'text-amber-400';
    if (report.cfpbAlignment >= 45) return 'text-orange-400';
    return 'text-rose-400';
  };

  const getComplianceBg = () => {
    if (report.cfpbAlignment >= 80) return 'from-emerald-500/10 via-emerald-500/5 to-transparent border-emerald-500/30';
    if (report.cfpbAlignment >= 60) return 'from-amber-500/10 via-amber-500/5 to-transparent border-amber-500/30';
    if (report.cfpbAlignment >= 45) return 'from-orange-500/10 via-orange-500/5 to-transparent border-orange-500/30';
    return 'from-rose-500/10 via-rose-500/5 to-transparent border-rose-500/30';
  };

  const getComplianceStatus = () => {
    if (report.cfpbAlignment >= 80) return 'Compliant';
    if (report.cfpbAlignment >= 60) return 'Needs Improvement';
    if (report.cfpbAlignment >= 45) return 'Non-Compliant';
    return 'Critically Non-Compliant';
  };

  const getBadgeVariantClass = () => {
    if (report.cfpbAlignment >= 80) return 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20';
    if (report.cfpbAlignment >= 60) return 'bg-amber-500/10 text-amber-400 border border-amber-500/20';
    if (report.cfpbAlignment >= 45) return 'bg-orange-500/10 text-orange-400 border border-orange-500/20';
    return 'bg-rose-500/10 text-rose-400 border border-rose-500/20';
  };

  return (
    <div className="space-y-6">
      {/* Overall Compliance Score */}
      <Card className={`p-6 border bg-gradient-to-br ${getComplianceBg()} rounded-2xl relative overflow-hidden`}>
        <div className="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full blur-3xl pointer-events-none" />
        
        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-4 justify-between">
          <div className="flex items-center gap-4">
            <div className={`p-3 rounded-xl bg-slate-950/20 border border-white/5`}>
              <Shield className={`w-8 h-8 ${getComplianceColor()}`} />
            </div>
            <div>
              <h3 className="text-lg font-extrabold text-slate-100">
                CFPB Compliance Score: {report.cfpbAlignment}%
              </h3>
              <p className={`text-xs font-semibold mt-0.5 ${getComplianceColor()}`}>
                Status: {getComplianceStatus()}
              </p>
            </div>
          </div>
          <Badge className={`${getBadgeVariantClass()} text-xs px-3 py-1 font-bold rounded-lg`}>
            {getComplianceStatus()}
          </Badge>
        </div>
        
        <Progress value={report.cfpbAlignment} className="h-3 bg-slate-900 border border-white/5" />
        
        <p className="text-xs text-slate-400 mt-4 leading-relaxed">
          This score reflects alignment with the Consumer Financial Protection Bureau (CFPB) guidelines 
          against deceptive practices in financial services, calculated by deducting points based on the severity of issues found.
        </p>
      </Card>

      {/* Issues Found */}
      {report.issues.length > 0 && (
        <Card className="p-6 bg-slate-900/30 border border-border rounded-2xl">
          <div className="flex items-center gap-3 mb-4">
            <AlertCircle className="w-5 h-5 text-rose-400" />
            <h4 className="font-bold text-sm text-slate-200">Compliance Issues Identified</h4>
          </div>
          
          <div className="space-y-3">
            {report.issues.map((issue, index) => (
              <div
                key={index}
                className="flex items-start gap-3 p-3.5 bg-rose-500/5 border border-rose-500/10 rounded-xl"
              >
                <div className="w-5 h-5 rounded-md bg-rose-500/20 text-rose-400 border border-rose-500/30 flex items-center justify-center text-xs font-bold shrink-0 mt-0.5">
                  {index + 1}
                </div>
                <p className="text-xs text-rose-200/90 leading-relaxed flex-1">{issue}</p>
              </div>
            ))}
          </div>
        </Card>
      )}

      {/* Recommendations */}
      {report.recommendations.length > 0 && (
        <Card className="p-6 bg-slate-900/30 border border-border rounded-2xl">
          <div className="flex items-center gap-3 mb-4">
            <CheckCircle2 className="w-5 h-5 text-emerald-400" />
            <h4 className="font-bold text-sm text-slate-200">Compliance Recommendations</h4>
          </div>
          
          <div className="space-y-3">
            {report.recommendations.map((recommendation, index) => (
              <div
                key={index}
                className="flex items-start gap-3 p-3.5 bg-emerald-500/5 border border-emerald-500/10 rounded-xl"
              >
                <div className="w-5 h-5 rounded-md bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 flex items-center justify-center text-xs font-bold shrink-0 mt-0.5">
                  {index + 1}
                </div>
                <p className="text-xs text-emerald-200/90 leading-relaxed flex-1">{recommendation}</p>
              </div>
            ))}
          </div>
        </Card>
      )}

      {/* CFPB Guidelines Reference */}
      <Card className="p-6 bg-slate-900/30 border border-border rounded-2xl">
        <div className="flex items-center gap-3 mb-4">
          <FileCheck className="w-5 h-5 text-indigo-400" />
          <h4 className="font-bold text-sm text-slate-200">CFPB Guidelines Reference</h4>
        </div>
        
        <div className="grid sm:grid-cols-2 gap-4">
          <div className="bg-slate-950/20 rounded-xl p-4 border border-white/5">
            <h5 className="font-bold text-xs text-slate-200 mb-1">Deceptive Practices (12 CFR 1041)</h5>
            <p className="text-xs text-slate-400 leading-relaxed">
              Prohibits unfair, deceptive, or abusive acts or practices (UDAAP) in connection with 
              consumer financial products or services.
            </p>
          </div>
          
          <div className="bg-slate-950/20 rounded-xl p-4 border border-white/5">
            <h5 className="font-bold text-xs text-slate-200 mb-1">Truth in Lending Act (TILA)</h5>
            <p className="text-xs text-slate-400 leading-relaxed">
              Requires clear disclosure of key terms and costs of consumer credit, ensuring 
              transparency in lending practices.
            </p>
          </div>
          
          <div className="bg-slate-950/20 rounded-xl p-4 border border-white/5">
            <h5 className="font-bold text-xs text-slate-200 mb-1">Electronic Fund Transfer Act (EFTA)</h5>
            <p className="text-xs text-slate-400 leading-relaxed">
              Protects consumers engaging in electronic fund transfers, requiring clear 
              disclosure of terms and conditions.
            </p>
          </div>
          
          <div className="bg-slate-950/20 rounded-xl p-4 border border-white/5">
            <h5 className="font-bold text-xs text-slate-200 mb-1">Fair Debt Collection Practices Act</h5>
            <p className="text-xs text-slate-400 leading-relaxed">
              Prohibits abusive, unfair, or deceptive practices by debt collectors, 
              including manipulative communication tactics.
            </p>
          </div>
        </div>
      </Card>

      {/* Action Items */}
      <Card className="p-6 bg-indigo-500/5 border border-indigo-500/10 rounded-2xl">
        <h4 className="font-bold text-sm text-indigo-300 mb-3">📋 Compliance Action Items</h4>
        <ol className="list-decimal list-inside space-y-2 text-xs text-indigo-200/80 leading-relaxed">
          <li>Address critical violations immediately to avoid regulatory action</li>
          <li>Implement recommended design changes in order of severity</li>
          <li>Conduct user testing to validate improved experience</li>
          <li>Schedule follow-up compliance audit after changes are made</li>
          <li>Document all changes for regulatory review</li>
          <li>Train design and product teams on ethical UI principles</li>
        </ol>
      </Card>

      {/* AI Explanation */}
      <div className="bg-indigo-500/5 border border-indigo-500/10 rounded-xl p-4">
        <h4 className="font-bold text-xs text-indigo-300 mb-2">🤖 XAI Compliance Analysis</h4>
        <p className="text-xs text-slate-400 leading-relaxed">
          Our compliance engine uses natural language processing to match detected dark patterns 
          against CFPB regulation text. Each violation is cross-referenced with specific guideline 
          sections to provide actionable, legally-grounded recommendations. The compliance score 
          is calculated using a weighted severity model that prioritizes consumer protection.
        </p>
      </div>
    </div>
  );
}