src/app/components/ExportReport.tsx

import { Download, FileText } from 'lucide-react';
import { Button } from './ui/button';
import { AnalysisData } from '../types/analysis';

interface ExportReportProps {
  data: AnalysisData;
}

export function ExportReport({ data }: ExportReportProps) {
  const generateReport = () => {
    const reportContent = `
FINTECH DARK PATTERN DETECTION REPORT
Generated: ${new Date(data.timestamp).toLocaleString()}
=======================================================

EXECUTIVE SUMMARY
-----------------
Trust Score: ${data.overallScore}/100
Risk Level: ${data.riskLevel.toUpperCase()}
Dark Patterns Detected: ${data.darkPatterns.length}
CFPB Compliance: ${data.complianceReport.cfpbAlignment}%

DETECTED DARK PATTERNS
-----------------------
${data.darkPatterns.map((pattern, index) => `
${index + 1}. ${pattern.type} [${pattern.severity.toUpperCase()}]
   Description: ${pattern.description}
   CFPB Violation: ${pattern.cfpbViolation}
   Recommendation: ${pattern.recommendation}
   Confidence: ${pattern.confidence}%
   Location: (${pattern.location.x}%, ${pattern.location.y}%)
`).join('\n')}

CFPB COMPLIANCE ISSUES
----------------------
${data.complianceReport.issues.map((issue, index) => `${index + 1}. ${issue}`).join('\n')}

RECOMMENDATIONS
---------------
${data.complianceReport.recommendations.map((rec, index) => `${index + 1}. ${rec}`).join('\n')}

=======================================================
This report was generated by the Fintech Dark Pattern Detector
using AI-powered XAI analysis and CFPB compliance heuristics.
    `.trim();

    // Create and download the report
    const blob = new Blob([reportContent], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `dark-pattern-report-${Date.now()}.txt`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  const generateJSON = () => {
    const jsonContent = JSON.stringify(data, null, 2);
    const blob = new Blob([jsonContent], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `dark-pattern-report-${Date.now()}.json`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  return (
    <div className="flex gap-3">
      <Button onClick={generateReport} variant="outline" size="sm">
        <FileText className="w-4 h-4 mr-2" />
        Export Report (TXT)
      </Button>
      <Button onClick={generateJSON} variant="outline" size="sm">
        <Download className="w-4 h-4 mr-2" />
        Export Data (JSON)
      </Button>
    </div>
  );
}