From d84df36d93a2171c984a70abc36b4dde62184782 Mon Sep 17 00:00:00 2001
From: nearlynithin <nearlynithin@gmail.com>
Date: Sat, 8 Nov 2025 03:16:28 +0530
Subject: [PATCH] fix: support txt on input

---
 frontend/components/try/CenterPanel.tsx | 5092 ++++++++++++++---------
 1 file changed, 3070 insertions(+), 2022 deletions(-)

diff --git a/frontend/components/try/CenterPanel.tsx b/frontend/components/try/CenterPanel.tsx
index cd51226..14e787c 100644
--- a/frontend/components/try/CenterPanel.tsx
+++ b/frontend/components/try/CenterPanel.tsx
@@ -1,2086 +1,3134 @@
 "use client";
 import { TryTab } from "./Sidebar";
 import { useState, useRef, useCallback, useEffect } from "react";
-import { saveLatestUpload, getLatestUpload, deleteLatestUpload } from "../../lib/indexeddb";
-import { analyzeDataset, cleanDataset, detectPII, getReportUrl, type AnalyzeResponse, type CleanResponse, type DetectPIIResponse } from "../../lib/api";
+import {
+  saveLatestUpload,
+  getLatestUpload,
+  deleteLatestUpload,
+} from "../../lib/indexeddb";
+import {
+  analyzeDataset,
+  cleanDataset,
+  detectPII,
+  getReportUrl,
+  type AnalyzeResponse,
+  type CleanResponse,
+  type DetectPIIResponse,
+} from "../../lib/api";
 
 interface CenterPanelProps {
-	tab: TryTab;
-	onAnalyze?: () => void;
+  tab: TryTab;
+  onAnalyze?: () => void;
 }
 
 interface UploadedFileMeta {
-	name: string;
-	size: number;
-	type: string;
-	contentPreview: string;
+  name: string;
+  size: number;
+  type: string;
+  contentPreview: string;
 }
 
 interface TablePreviewData {
-	headers: string[];
-	rows: string[][];
-	origin: 'csv';
+  headers: string[];
+  rows: string[][];
+  origin: "csv";
 }
 
 export function CenterPanel({ tab, onAnalyze }: CenterPanelProps) {
-	const PREVIEW_BYTES = 64 * 1024; // read first 64KB slice for large-file preview
-	const [fileMeta, setFileMeta] = useState<UploadedFileMeta | null>(null);
-	const [uploadedFile, setUploadedFile] = useState<File | null>(null);
-	const [isDragging, setIsDragging] = useState(false);
-	const [progress, setProgress] = useState<number>(0);
-	const [progressLabel, setProgressLabel] = useState<string>("Processing");
-	const [tablePreview, setTablePreview] = useState<TablePreviewData | null>(null);
-	const inputRef = useRef<HTMLInputElement | null>(null);
-	const [loadedFromCache, setLoadedFromCache] = useState(false);
-	const [isProcessing, setIsProcessing] = useState(false);
-	const [error, setError] = useState<string | null>(null);
-	
-	// Analysis results
-	const [analyzeResult, setAnalyzeResult] = useState<AnalyzeResponse | null>(null);
-	const [cleanResult, setCleanResult] = useState<CleanResponse | null>(null);
-	const [piiDetectionResult, setPIIDetectionResult] = useState<DetectPIIResponse | null>(null);
+  const PREVIEW_BYTES = 64 * 1024; // read first 64KB slice for large-file preview
+  const [fileMeta, setFileMeta] = useState<UploadedFileMeta | null>(null);
+  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [progress, setProgress] = useState<number>(0);
+  const [progressLabel, setProgressLabel] = useState<string>("Processing");
+  const [tablePreview, setTablePreview] = useState<TablePreviewData | null>(
+    null,
+  );
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [loadedFromCache, setLoadedFromCache] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
-	const reset = () => {
-		setFileMeta(null);
-		setUploadedFile(null);
-		setProgress(0);
-		setProgressLabel("Processing");
-		setTablePreview(null);
-		setError(null);
-		setPIIDetectionResult(null);
-	};
+  // Analysis results
+  const [analyzeResult, setAnalyzeResult] = useState<AnalyzeResponse | null>(
+    null,
+  );
+  const [cleanResult, setCleanResult] = useState<CleanResponse | null>(null);
+  const [piiDetectionResult, setPIIDetectionResult] =
+    useState<DetectPIIResponse | null>(null);
 
-	// Handle API calls
-	const handleAnalyze = async () => {
-		if (!uploadedFile) {
-			setError("No file uploaded");
-			return;
-		}
-		
-		setIsProcessing(true);
-		setError(null);
-		setProgressLabel("Analyzing dataset...");
-		
-		try {
-			const result = await analyzeDataset(uploadedFile);
-			setAnalyzeResult(result);
-			setProgressLabel("Analysis complete!");
-			onAnalyze?.(); // Navigate to bias-analysis tab
-		} catch (err: any) {
-			setError(err.message || "Analysis failed");
-		} finally {
-			setIsProcessing(false);
-		}
-	};
+  const reset = () => {
+    setFileMeta(null);
+    setUploadedFile(null);
+    setProgress(0);
+    setProgressLabel("Processing");
+    setTablePreview(null);
+    setError(null);
+    setPIIDetectionResult(null);
+  };
 
-	const handleDetectPII = async () => {
-		if (!uploadedFile) {
-			setError("No file uploaded");
-			return;
-		}
-		
-		setIsProcessing(true);
-		setError(null);
-		setProgressLabel("Detecting PII...");
-		
-		try {
-			const result = await detectPII(uploadedFile);
-			setPIIDetectionResult(result);
-			setProgressLabel("PII detection complete!");
-		} catch (err: any) {
-			setError(err.message || "PII detection failed");
-		} finally {
-			setIsProcessing(false);
-		}
-	};
+  // Handle API calls
+  const handleAnalyze = async () => {
+    if (!uploadedFile) {
+      setError("No file uploaded");
+      return;
+    }
 
-	const handleClean = async () => {
-		if (!uploadedFile) {
-			setError("No file uploaded");
-			return;
-		}
-		
-		setIsProcessing(true);
-		setError(null);
-		setProgressLabel("Cleaning dataset...");
-		
-		try {
-			const result = await cleanDataset(uploadedFile);
-			setCleanResult(result);
-			setProgressLabel("Cleaning complete!");
-		} catch (err: any) {
-			setError(err.message || "Cleaning failed");
-		} finally {
-			setIsProcessing(false);
-		}
-	};		function tryParseCSV(text: string, maxRows = 50, maxCols = 40): TablePreviewData | null {
-			const lines = text.split(/\r?\n/).filter(l => l.trim().length > 0);
-			if (lines.length < 2) return null;
-			const commaDensity = lines.slice(0, 10).filter(l => l.includes(',')).length;
-			if (commaDensity < 2) return null;
-			const parseLine = (line: string) => {
-				const out: string[] = [];
-				let cur = '';
-				let inQuotes = false;
-				for (let i = 0; i < line.length; i++) {
-					const ch = line[i];
-					if (ch === '"') {
-						if (inQuotes && line[i + 1] === '"') { cur += '"'; i++; } else { inQuotes = !inQuotes; }
-					} else if (ch === ',' && !inQuotes) {
-						out.push(cur);
-						cur = '';
-					} else { cur += ch; }
-				}
-				out.push(cur);
-				return out.map(c => c.trim());
-			};
-			const raw = lines.slice(0, maxRows).map(parseLine);
-			if (raw.length === 0) return null;
-			const headers = raw[0];
-			const colCount = Math.min(headers.length, maxCols);
-			const rows = raw.slice(1).map(r => r.slice(0, colCount));
-			return { headers: headers.slice(0, colCount), rows, origin: 'csv' };
-		}
+    setIsProcessing(true);
+    setError(null);
+    setProgressLabel("Analyzing dataset...");
 
-		// We no longer build table preview for JSON; revert JSON to raw text view.
+    try {
+      const result = await analyzeDataset(uploadedFile);
+      setAnalyzeResult(result);
+      setProgressLabel("Analysis complete!");
+      onAnalyze?.(); // Navigate to bias-analysis tab
+    } catch (err: any) {
+      setError(err.message || "Analysis failed");
+    } finally {
+      setIsProcessing(false);
+    }
+  };
 
-	const processFile = useCallback(async (f: File) => {
-		if (!f) return;
-		const isCSV = /\.csv$/i.test(f.name);
-		setProgress(0);
-		setUploadedFile(f); // Save the file for API calls
-		
-		// For large files, show a progress bar while reading the file stream (no preview)
-		if (f.size > 1024 * 1024) {
-				setProgressLabel("Uploading");
-				const metaObj: UploadedFileMeta = {
-					name: f.name,
-					size: f.size,
-					type: f.type || "unknown",
-					contentPreview: `Loading partial preview (first ${Math.round(PREVIEW_BYTES/1024)}KB)...`,
-				};
-				setFileMeta(metaObj);
-				setTablePreview(null);
-				// Save to IndexedDB immediately so it persists without needing full read
-				(async () => {
-					try { await saveLatestUpload(f, metaObj); } catch {}
-				})();
-				// Read head slice for partial preview & possible CSV table extraction
-				try {
-					const headBlob = f.slice(0, PREVIEW_BYTES);
-					const headReader = new FileReader();
-					headReader.onload = async () => {
-						try {
-							const buf = headReader.result as ArrayBuffer;
-							const decoder = new TextDecoder();
-							const text = decoder.decode(buf);
-							setFileMeta(prev => prev ? { ...prev, contentPreview: text.slice(0, 4000) } : prev);
-							if (isCSV) {
-								const parsed = tryParseCSV(text);
-								setTablePreview(parsed);
-							} else {
-								setTablePreview(null);
-							}
-							try { await saveLatestUpload(f, { ...metaObj, contentPreview: text.slice(0, 4000) }); } catch {}
-						} catch { /* ignore */ }
-					};
-					headReader.readAsArrayBuffer(headBlob);
-				} catch { /* ignore */ }
-				// Use streaming read for progress without buffering entire file in memory
-				try {
-					const stream: ReadableStream<Uint8Array> | undefined = (typeof (f as any).stream === "function" ? (f as any).stream() : undefined);
-					if (stream && typeof stream.getReader === "function") {
-						const reader = stream.getReader();
-						let loaded = 0;
-						const total = f.size || 1;
-						for (;;) {
-							const { done, value } = await reader.read();
-							if (done) break;
-							loaded += value ? value.length : 0;
-							const pct = Math.min(100, Math.round((loaded / total) * 100));
-							setProgress(pct);
-						}
-						setProgress(100);
-					} else {
-						// Fallback to FileReader progress events
-						const reader = new FileReader();
-						reader.onprogress = (evt) => {
-							if (evt.lengthComputable) {
-								const pct = Math.min(100, Math.round((evt.loaded / evt.total) * 100));
-								setProgress(pct);
-							} else {
-								setProgress((p) => (p < 90 ? p + 5 : p));
-							}
-						};
-						reader.onloadend = () => setProgress(100);
-						reader.onerror = () => setProgress(0);
-						reader.readAsArrayBuffer(f);
-					}
-				} catch {
-					setProgress(100);
-				}
-				return;
-			}
-			const reader = new FileReader();
-			reader.onprogress = (evt) => {
-				if (evt.lengthComputable) {
-					const pct = Math.min(100, Math.round((evt.loaded / evt.total) * 100));
-					setProgress(pct);
-				} else {
-					setProgress((p) => (p < 90 ? p + 5 : p));
-				}
-			};
-				reader.onload = async () => {
-				try {
-					const buf = reader.result as ArrayBuffer;
-					const decoder = new TextDecoder();
-					const text = decoder.decode(buf);
-						const metaObj: UploadedFileMeta = {
-						name: f.name,
-						size: f.size,
-						type: f.type || "unknown",
-						contentPreview: text.slice(0, 4000),
-						};
-						setFileMeta(metaObj);
-						if (isCSV) {
-							const parsed = tryParseCSV(text);
-							setTablePreview(parsed);
-						} else {
-							setTablePreview(null);
-						}
-						// Save file blob and meta to browser cache (IndexedDB)
-						try {
-							await saveLatestUpload(f, metaObj);
-						} catch {}
-					setProgressLabel("Processing");
-					setProgress(100);
-				} catch (e) {
-						const metaObj: UploadedFileMeta = {
-						name: f.name,
-						size: f.size,
-						type: f.type || "unknown",
-						contentPreview: "Unable to decode preview.",
-						};
-						setFileMeta(metaObj);
-						setTablePreview(null);
-						try {
-							await saveLatestUpload(f, metaObj);
-						} catch {}
-					setProgressLabel("Processing");
-					setProgress(100);
-				}
-			};
-			reader.onerror = () => {
-				setProgress(0);
-			};
-			reader.readAsArrayBuffer(f);
-		}, []);
+  const handleDetectPII = async () => {
+    if (!uploadedFile) {
+      setError("No file uploaded");
+      return;
+    }
 
-		function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
-			const f = e.target.files?.[0];
-			processFile(f as File);
-		}
+    setIsProcessing(true);
+    setError(null);
+    setProgressLabel("Detecting PII...");
 
-		const onDragOver = (e: React.DragEvent<HTMLDivElement>) => {
-			e.preventDefault();
-			setIsDragging(true);
-		};
-		const onDragLeave = () => setIsDragging(false);
-		const onDrop = (e: React.DragEvent<HTMLDivElement>) => {
-			e.preventDefault();
-			setIsDragging(false);
-			const f = e.dataTransfer.files?.[0];
-			processFile(f as File);
-		};
+    try {
+      const result = await detectPII(uploadedFile);
+      setPIIDetectionResult(result);
+      setProgressLabel("PII detection complete!");
+    } catch (err: any) {
+      setError(err.message || "PII detection failed");
+    } finally {
+      setIsProcessing(false);
+    }
+  };
 
-	// Load last cached upload on mount (processing tab only)
-	useEffect(() => {
-		let ignore = false;
-		if (tab !== "processing") return;
-		(async () => {
-			try {
-				const { file, meta } = await getLatestUpload();
-				if (!ignore && meta) {
-					setFileMeta(meta as UploadedFileMeta);
-					if (file) {
-						setUploadedFile(file);
-					}
-					setLoadedFromCache(true);
-				}
-			} catch {}
-		})();
-		return () => {
-			ignore = true;
-		};
-	}, [tab]);	function renderTabContent() {
-			switch (tab) {
-			case "processing":
-					return (
-						<div className="space-y-4 max-w-[1100px] xl:max-w-[1200px] w-full mx-auto">
-						<h2 className="text-xl font-semibold">Upload & Process Data</h2>
-						<p className="text-sm text-slate-600">Upload a CSV / JSON / text file. We will later parse, detect PII, and queue analyses.</p>
-									<div className="flex flex-col gap-3 min-w-0">
-										<div
-											onDragOver={onDragOver}
-											onDragLeave={onDragLeave}
-											onDrop={onDrop}
-											className={
-												"rounded-lg border-2 border-dashed p-6 text-center transition-colors " +
-												(isDragging ? "border-brand-600 bg-brand-50" : "border-slate-300 hover:border-brand-300")
-											}
-										>
-											<p className="text-sm text-slate-600">Drag & drop a CSV / JSON / TXT here, or click to browse.</p>
-											<div className="mt-3">
-												<button
-													type="button"
-													onClick={() => inputRef.current?.click()}
-													className="inline-flex items-center rounded-md bg-brand-600 px-4 py-2 text-white text-sm font-medium shadow hover:bg-brand-500"
-												>
-													Choose file
-												</button>
-											</div>
-										</div>
-										<input
-								ref={inputRef}
-								type="file"
-								accept=".csv,.json,.txt"
-								onChange={handleFileChange}
-								className="hidden"
-								aria-hidden
-							/>
-										{progress > 0 && (
-											<div className="w-full">
-												<div className="h-2 w-full rounded-full bg-slate-200 overflow-hidden">
-													<div
-														className="h-2 bg-brand-600 transition-all"
-														style={{ width: `${progress}%` }}
-													/>
-												</div>
-												<div className="mt-1 text-xs text-slate-500">{progressLabel} {progress}%</div>
-											</div>
-										)}
-											{fileMeta && (
-								<div className="rounded-md border border-slate-200 p-4 bg-white shadow-sm">
-									<div className="flex items-center justify-between mb-2">
-										<div className="text-sm font-medium">{fileMeta.name}</div>
-										<div className="text-xs text-slate-500">{Math.round(fileMeta.size / 1024)} KB</div>
-									</div>
-													{loadedFromCache && (
-														<div className="mb-2 text-[11px] text-brand-700">Loaded from browser cache</div>
-													)}
-												<div className="mb-3 text-xs text-slate-500">{fileMeta.type || "Unknown type"}</div>
-												{/* Table preview when structured data detected; otherwise show text */}
-												{tablePreview && tablePreview.origin === 'csv' ? (
-													<div className="max-h-64 w-full min-w-0 overflow-x-auto overflow-y-auto rounded-md bg-slate-50">
-														<table className="min-w-full text-xs">
-															<thead className="sticky top-0 bg-slate-100">
-																<tr>
-																	{tablePreview.headers.map((h, idx) => (
-																		<th key={idx} className="text-left font-semibold px-3 py-2 border-b border-slate-200 whitespace-nowrap">{h}</th>
-																	))}
-																</tr>
-															</thead>
-															<tbody>
-																{tablePreview.rows.map((r, i) => (
-																	<tr key={i} className={i % 2 === 0 ? "" : "bg-slate-100/50"}>
-																		{r.map((c, j) => (
-																			<td key={j} className="px-3 py-1.5 border-b border-slate-100 whitespace-nowrap max-w-[24ch] overflow-hidden text-ellipsis">{c}</td>
-																		))}
-																	</tr>
-																))}
-															</tbody>
-														</table>
-													</div>
-												) : (
-													<pre className="max-h-64 overflow-auto text-xs bg-slate-50 p-3 rounded-md whitespace-pre-wrap leading-relaxed">
-														{fileMeta.contentPreview || "(no preview)"}
-													</pre>
-												)}
-												
-												{error && (
-													<div className="mt-3 p-3 bg-red-50 border border-red-200 rounded-md text-sm text-red-700">
-														❌ {error}
-													</div>
-												)}
-												
-												{piiDetectionResult && (
-													<div className="mt-3 p-3 bg-blue-50 border border-blue-200 rounded-md text-sm text-blue-700">
-														🔍 PII Detection complete! Found {piiDetectionResult.summary.risky_columns_found} risky columns in {piiDetectionResult.file_type.toUpperCase()} file.
-														<div className="mt-1 text-xs">
-															<span className="font-semibold text-red-700">{piiDetectionResult.summary.high_risk_count} HIGH</span> • 
-															<span className="font-semibold text-orange-600 ml-1">{piiDetectionResult.summary.medium_risk_count} MEDIUM</span> • 
-															<span className="font-semibold text-yellow-600 ml-1">{piiDetectionResult.summary.low_risk_count} LOW</span>
-														</div>
-														<p className="mt-2 text-xs">Review detected risks in the "Bias & Risk Mitigation" tab to choose anonymization strategies.</p>
-													</div>
-												)}
-												
-												{analyzeResult && (
-													<div className="mt-3 p-3 bg-green-50 border border-green-200 rounded-md text-sm text-green-700">
-														✅ Analysis complete! View results in tabs.
-														<a
-															href={getReportUrl(analyzeResult.report_file)}
-															target="_blank"
-															rel="noopener noreferrer"
-															className="ml-2 underline"
-														>
-															Download Report
-														</a>
-													</div>
-												)}
-												
-												{cleanResult && (
-													<div className="mt-3 p-3 bg-green-50 border border-green-200 rounded-md text-sm text-green-700">
-														✅ Cleaning complete! {cleanResult.summary.total_cells_affected} cells anonymized.
-														<div className="mt-2 flex gap-2">
-															<a
-																href={getReportUrl(cleanResult.files.cleaned_csv)}
-																download
-																className="underline"
-															>
-																Download Cleaned CSV
-															</a>
-															<a
-																href={getReportUrl(cleanResult.files.audit_report)}
-																target="_blank"
-																rel="noopener noreferrer"
-																className="underline"
-															>
-																View Audit Report
-															</a>
-														</div>
-													</div>
-												)}
-												
-												<div className="mt-3 flex justify-end gap-2">
-													<button
-														type="button"
-															onClick={async () => {
-																reset();
-																try { await deleteLatestUpload(); } catch {}
-																setLoadedFromCache(false);
-																setAnalyzeResult(null);
-																setCleanResult(null);
-																setPIIDetectionResult(null);
-															}}
-														className="text-xs rounded-md border px-3 py-1.5 hover:bg-slate-50"
-													>
-														Clear
-													</button>
-													<button
-														type="button"
-														onClick={handleDetectPII}
-														disabled={isProcessing}
-														className="text-xs rounded-md bg-blue-600 text-white px-3 py-1.5 hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
-													>
-														{isProcessing ? "Processing..." : "🔍 Detect PII"}
-													</button>
-													<button
-														type="button"
-														onClick={handleAnalyze}
-														disabled={isProcessing}
-														className="text-xs rounded-md bg-brand-600 text-white px-3 py-1.5 hover:bg-brand-500 disabled:opacity-50 disabled:cursor-not-allowed"
-													>
-														{isProcessing ? "Processing..." : "⚡ Analyze"}
-													</button>
-												</div>
-								</div>
-							)}
-						</div>
-					</div>
-				);
-			case "bias-analysis":
-				return (
-					<div className="space-y-6">
-						<div>
-							<h2 className="text-2xl font-bold mb-2">Bias & Fairness Analysis</h2>
-							<p className="text-sm text-slate-600">Comprehensive evaluation of algorithmic fairness across demographic groups</p>
-						</div>
-						
-						{analyzeResult ? (
-							<div className="space-y-6">
-								{/* Overall Bias Score Card */}
-								<div className="p-6 bg-gradient-to-br from-purple-50 to-indigo-50 rounded-xl border-2 border-purple-200">
-									<div className="flex items-start justify-between">
-										<div>
-											<div className="text-sm font-medium text-purple-700 mb-1">Overall Bias Score</div>
-											<div className="text-5xl font-bold text-purple-900">
-												{(analyzeResult.bias_metrics.overall_bias_score * 100).toFixed(1)}%
-											</div>
-											<div className="mt-3 flex items-center gap-2">
-												{analyzeResult.bias_metrics.overall_bias_score < 0.3 ? (
-													<>
-														<span className="px-3 py-1 bg-green-100 text-green-800 text-xs font-semibold rounded-full">
-															✓ Low Bias
-														</span>
-														<span className="text-sm text-slate-600">Excellent fairness</span>
-													</>
-												) : analyzeResult.bias_metrics.overall_bias_score < 0.5 ? (
-													<>
-														<span className="px-3 py-1 bg-yellow-100 text-yellow-800 text-xs font-semibold rounded-full">
-															⚠ Moderate Bias
-														</span>
-														<span className="text-sm text-slate-600">Monitor recommended</span>
-													</>
-												) : (
-													<>
-														<span className="px-3 py-1 bg-red-100 text-red-800 text-xs font-semibold rounded-full">
-															✗ High Bias
-														</span>
-														<span className="text-sm text-slate-600">Action required</span>
-													</>
-												)}
-											</div>
-										</div>
-										<div className="text-right">
-											<div className="text-sm text-slate-600 mb-1">Violations</div>
-											<div className={`text-3xl font-bold ${analyzeResult.bias_metrics.violations_detected.length > 0 ? 'text-red-600' : 'text-green-600'}`}>
-												{analyzeResult.bias_metrics.violations_detected.length}
-											</div>
-										</div>
-									</div>
-									
-									{/* Interpretation */}
-									<div className="mt-4 p-4 bg-white/70 rounded-lg">
-										<div className="text-xs font-semibold text-purple-800 mb-1">INTERPRETATION</div>
-										<p className="text-sm text-slate-700">
-											{analyzeResult.bias_metrics.overall_bias_score < 0.3 
-												? "Your model demonstrates strong fairness across demographic groups. Continue monitoring to ensure consistent performance."
-												: analyzeResult.bias_metrics.overall_bias_score < 0.5
-												? "Moderate bias detected. Review fairness metrics below and consider implementing mitigation strategies to reduce disparities."
-												: "Significant bias detected. Immediate action required to address fairness concerns before deployment. Review all violation details below."}
-										</p>
-									</div>
-								</div>
+  const handleClean = async () => {
+    if (!uploadedFile) {
+      setError("No file uploaded");
+      return;
+    }
 
-								{/* Model Performance Metrics */}
-								<div className="p-6 bg-white rounded-xl border border-slate-200 shadow-sm">
-									<h3 className="font-bold text-lg mb-4 flex items-center gap-2">
-										<span className="text-blue-600">📊</span>
-										Model Performance Metrics
-									</h3>
-									<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-										<div className="p-4 bg-blue-50 rounded-lg">
-											<div className="text-xs text-blue-700 font-semibold mb-1">ACCURACY</div>
-											<div className="text-2xl font-bold text-blue-900">{(analyzeResult.model_performance.accuracy * 100).toFixed(1)}%</div>
-											<div className="text-xs text-slate-600 mt-1">Overall correctness</div>
-										</div>
-										<div className="p-4 bg-green-50 rounded-lg">
-											<div className="text-xs text-green-700 font-semibold mb-1">PRECISION</div>
-											<div className="text-2xl font-bold text-green-900">{(analyzeResult.model_performance.precision * 100).toFixed(1)}%</div>
-											<div className="text-xs text-slate-600 mt-1">Positive prediction accuracy</div>
-										</div>
-										<div className="p-4 bg-purple-50 rounded-lg">
-											<div className="text-xs text-purple-700 font-semibold mb-1">RECALL</div>
-											<div className="text-2xl font-bold text-purple-900">{(analyzeResult.model_performance.recall * 100).toFixed(1)}%</div>
-											<div className="text-xs text-slate-600 mt-1">True positive detection rate</div>
-										</div>
-										<div className="p-4 bg-orange-50 rounded-lg">
-											<div className="text-xs text-orange-700 font-semibold mb-1">F1 SCORE</div>
-											<div className="text-2xl font-bold text-orange-900">{(analyzeResult.model_performance.f1_score * 100).toFixed(1)}%</div>
-											<div className="text-xs text-slate-600 mt-1">Balanced metric</div>
-										</div>
-									</div>
-								</div>
+    setIsProcessing(true);
+    setError(null);
+    setProgressLabel("Cleaning dataset...");
 
-								{/* Fairness Metrics */}
-								{Object.keys(analyzeResult.bias_metrics.disparate_impact).length > 0 && (
-									<div className="p-6 bg-white rounded-xl border border-slate-200 shadow-sm">
-										<h3 className="font-bold text-lg mb-4 flex items-center gap-2">
-											<span className="text-purple-600">⚖️</span>
-											Fairness Metrics by Protected Attribute
-										</h3>
-										
-										{Object.entries(analyzeResult.bias_metrics.disparate_impact).map(([attr, metrics]: [string, any]) => (
-											<div key={attr} className="mb-6 last:mb-0 p-4 bg-slate-50 rounded-lg">
-												<div className="font-semibold text-slate-800 mb-3 flex items-center gap-2">
-													<span className="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded">
-														{attr.toUpperCase()}
-													</span>
-												</div>
-												
-												{/* Disparate Impact */}
-												{metrics?.disparate_impact?.value !== undefined && (
-													<div className="mb-3 p-3 bg-white rounded border border-slate-200">
-														<div className="flex items-center justify-between mb-2">
-															<div>
-																<div className="text-xs font-semibold text-slate-600">DISPARATE IMPACT RATIO</div>
-																<div className="text-2xl font-bold text-slate-900">{metrics.disparate_impact.value.toFixed(3)}</div>
-															</div>
-															<div className={`px-3 py-1 rounded-full text-xs font-semibold ${
-																metrics.disparate_impact.fair ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
-															}`}>
-																{metrics.disparate_impact.fair ? '✓ FAIR' : '✗ UNFAIR'}
-															</div>
-														</div>
-														<div className="text-xs text-slate-600 mb-2">{metrics.disparate_impact.interpretation || 'Ratio of positive rates between groups'}</div>
-														<div className="text-xs text-slate-500 bg-blue-50 p-2 rounded">
-															<strong>Fair Range:</strong> {metrics.disparate_impact.threshold || 0.8} - {(1/(metrics.disparate_impact.threshold || 0.8)).toFixed(2)} 
-															{metrics.disparate_impact.fair 
-																? " • This ratio indicates balanced treatment across groups." 
-																: " • Ratio outside fair range suggests one group receives significantly different outcomes."}
-														</div>
-													</div>
-												)}
-												
-												{/* Statistical Parity */}
-												{metrics?.statistical_parity_difference?.value !== undefined && (
-													<div className="mb-3 p-3 bg-white rounded border border-slate-200">
-														<div className="flex items-center justify-between mb-2">
-															<div>
-																<div className="text-xs font-semibold text-slate-600">STATISTICAL PARITY DIFFERENCE</div>
-																<div className="text-2xl font-bold text-slate-900">
-																	{metrics.statistical_parity_difference.value.toFixed(3)}
-																</div>
-															</div>
-															<div className={`px-3 py-1 rounded-full text-xs font-semibold ${
-																metrics.statistical_parity_difference.fair ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
-															}`}>
-																{metrics.statistical_parity_difference.fair ? '✓ FAIR' : '✗ UNFAIR'}
-															</div>
-														</div>
-														<div className="text-xs text-slate-600 mb-2">{metrics.statistical_parity_difference.interpretation || 'Difference in positive rates'}</div>
-														<div className="text-xs text-slate-500 bg-blue-50 p-2 rounded">
-															<strong>Fair Threshold:</strong> ±{metrics.statistical_parity_difference.threshold || 0.1} 
-															{metrics.statistical_parity_difference.fair 
-																? " • Difference within acceptable range for equal treatment." 
-																: " • Significant difference in positive outcome rates between groups."}
-														</div>
-													</div>
-												)}
-												
-												{/* Group Metrics */}
-												{metrics.group_metrics && (
-													<div className="p-3 bg-white rounded border border-slate-200">
-														<div className="text-xs font-semibold text-slate-600 mb-2">GROUP PERFORMANCE</div>
-														<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-															{Object.entries(metrics.group_metrics).map(([group, groupMetrics]: [string, any]) => (
-																<div key={group} className="p-2 bg-slate-50 rounded">
-																	<div className="font-medium text-sm text-slate-800">{group}</div>
-																	<div className="text-xs text-slate-600 mt-1">
-																		<div>Positive Rate: <strong>{groupMetrics.positive_rate !== undefined ? (groupMetrics.positive_rate * 100).toFixed(1) : 'N/A'}%</strong></div>
-																		<div>Sample Size: <strong>{groupMetrics.sample_size ?? 'N/A'}</strong></div>
-																		{groupMetrics.tpr !== undefined && <div>True Positive Rate: <strong>{(groupMetrics.tpr * 100).toFixed(1)}%</strong></div>}
-																	</div>
-																</div>
-															))}
-														</div>
-													</div>
-												)}
-											</div>
-										))}
-									</div>
-								)}
+    try {
+      const result = await cleanDataset(uploadedFile);
+      setCleanResult(result);
+      setProgressLabel("Cleaning complete!");
+    } catch (err: any) {
+      setError(err.message || "Cleaning failed");
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+  function tryParseCSV(
+    text: string,
+    maxRows = 50,
+    maxCols = 40,
+  ): TablePreviewData | null {
+    const lines = text.split(/\r?\n/).filter((l) => l.trim().length > 0);
+    if (lines.length < 2) return null;
+    const commaDensity = lines
+      .slice(0, 10)
+      .filter((l) => l.includes(",")).length;
+    if (commaDensity < 2) return null;
+    const parseLine = (line: string) => {
+      const out: string[] = [];
+      let cur = "";
+      let inQuotes = false;
+      for (let i = 0; i < line.length; i++) {
+        const ch = line[i];
+        if (ch === '"') {
+          if (inQuotes && line[i + 1] === '"') {
+            cur += '"';
+            i++;
+          } else {
+            inQuotes = !inQuotes;
+          }
+        } else if (ch === "," && !inQuotes) {
+          out.push(cur);
+          cur = "";
+        } else {
+          cur += ch;
+        }
+      }
+      out.push(cur);
+      return out.map((c) => c.trim());
+    };
+    const raw = lines.slice(0, maxRows).map(parseLine);
+    if (raw.length === 0) return null;
+    const headers = raw[0];
+    const colCount = Math.min(headers.length, maxCols);
+    const rows = raw.slice(1).map((r) => r.slice(0, colCount));
+    return { headers: headers.slice(0, colCount), rows, origin: "csv" };
+  }
 
-								{/* Violations */}
-								{analyzeResult.bias_metrics.violations_detected.length > 0 && (
-									<div className="p-6 bg-red-50 rounded-xl border-2 border-red-200">
-										<h3 className="font-bold text-lg mb-4 flex items-center gap-2 text-red-800">
-											<span>⚠️</span>
-											Fairness Violations Detected
-										</h3>
-										<div className="space-y-4">
-											{analyzeResult.bias_metrics.violations_detected.map((violation: any, i: number) => {
-												// Map bias violations to relevant GDPR articles
-												const gdprArticles = [
-													{
-														article: 'Article 5(1)(a) - Lawfulness, Fairness, and Transparency',
-														explanation: 'Personal data must be processed fairly. Algorithmic bias violates the fairness principle.'
-													},
-													{
-														article: 'Article 22 - Automated Decision-Making',
-														explanation: 'Individuals have the right not to be subject to decisions based solely on automated processing that produce legal or similarly significant effects, especially if discriminatory.'
-													},
-													{
-														article: 'Recital 71 - Safeguards Against Discrimination',
-														explanation: 'Automated decision-making should not be based on special categories of data and should include safeguards to prevent discriminatory effects.'
-													}
-												];
+  // We no longer build table preview for JSON; revert JSON to raw text view.
 
-												// Add ECOA if dealing with credit/lending
-												const isCredit = violation.attribute && (
-													violation.attribute.toLowerCase().includes('credit') || 
-													violation.attribute.toLowerCase().includes('loan') ||
-													violation.attribute.toLowerCase().includes('income')
-												);
+  const processFile = useCallback(async (f: File) => {
+    if (!f) return;
+    const isCSV = /\.csv$/i.test(f.name);
 
-												return (
-													<div key={i} className="p-5 bg-white rounded-xl border-2 border-red-300 shadow-sm hover:shadow-md transition-all">
-														{/* Violation Header */}
-														<div className="flex items-start gap-3 mb-4">
-															<span className={`px-3 py-1 rounded-full text-xs font-black shadow-sm ${
-																violation.severity === 'HIGH' ? 'bg-red-600 text-white' :
-																violation.severity === 'MEDIUM' ? 'bg-orange-600 text-white' :
-																'bg-yellow-600 text-white'
-															}`}>
-																{violation.severity}
-															</span>
-															<div className="flex-1">
-																<div className="font-bold text-lg text-slate-900">
-																	{violation.attribute}: {violation.metric}
-																</div>
-																<div className="text-sm text-slate-700 mt-1">{violation.message}</div>
-															</div>
-														</div>
+    if (!isCSV) {
+      try {
+        setProgressLabel("Uploading file...");
+        setIsProcessing(true);
+        setError(null);
 
-														{/* Violation Details */}
-														{violation.details && (
-															<div className="mb-4 p-3 bg-slate-50 rounded-lg border border-slate-200">
-																<div className="text-xs font-semibold text-slate-600 mb-1">📊 TECHNICAL DETAILS</div>
-																<div className="text-sm text-slate-700">{violation.details}</div>
-															</div>
-														)}
+        const formData = new FormData();
+        formData.append("file", f);
 
-														{/* GDPR Articles Violated */}
-														<div className="mb-4 p-4 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg border border-blue-200">
-															<div className="text-xs font-bold text-blue-800 mb-3 flex items-center gap-2">
-																<span>⚖️</span>
-																GDPR ARTICLES VIOLATED
-															</div>
-															<div className="space-y-2">
-																{gdprArticles.map((gdpr, idx) => (
-																	<div key={idx} className="p-2 bg-white/70 rounded border border-blue-200">
-																		<div className="font-semibold text-xs text-blue-900">{gdpr.article}</div>
-																		<div className="text-xs text-slate-700 mt-1">{gdpr.explanation}</div>
-																	</div>
-																))}
-																{isCredit && (
-																	<div className="p-2 bg-white/70 rounded border border-orange-200">
-																		<div className="font-semibold text-xs text-orange-900">ECOA (Equal Credit Opportunity Act)</div>
-																		<div className="text-xs text-slate-700 mt-1">
-																			Prohibits discrimination in credit decisions based on protected characteristics. This bias violation may constitute illegal discrimination.
-																		</div>
-																	</div>
-																)}
-															</div>
-														</div>
+        const res = await fetch("http://localhost:8000/api/files", {
+          method: "POST",
+          body: formData,
+        });
 
-														{/* Recommendations */}
-														<div className="p-3 bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg border border-green-200">
-															<div className="text-xs font-semibold text-green-800 mb-2">✓ RECOMMENDED ACTIONS</div>
-															<ul className="text-sm text-slate-700 space-y-1">
-																<li className="flex items-start gap-2">
-																	<span className="text-green-600">•</span>
-																	<span>Investigate and remediate bias in the {violation.attribute} attribute</span>
-																</li>
-																<li className="flex items-start gap-2">
-																	<span className="text-green-600">•</span>
-																	<span>Implement fairness constraints during model training</span>
-																</li>
-																<li className="flex items-start gap-2">
-																	<span className="text-green-600">•</span>
-																	<span>Consider rebalancing dataset or applying bias mitigation techniques</span>
-																</li>
-																<li className="flex items-start gap-2">
-																	<span className="text-green-600">•</span>
-																	<span>Document fairness assessment in GDPR Article 35 DPIA (Data Protection Impact Assessment)</span>
-																</li>
-																{violation.severity === 'HIGH' && (
-																	<li className="flex items-start gap-2">
-																		<span className="text-red-600">•</span>
-																		<span className="text-red-700 font-semibold">URGENT: This high-severity violation requires immediate attention before deployment</span>
-																	</li>
-																)}
-															</ul>
-														</div>
-													</div>
-												);
-											})}
-										</div>
-									</div>
-								)}
+        if (!res.ok) {
+          const errText = await res.text();
+          throw new Error(errText || "Upload failed");
+        }
 
-								{/* Key Insights */}
-								<div className="p-6 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl border border-blue-200">
-									<h3 className="font-bold text-lg mb-3 flex items-center gap-2 text-blue-900">
-										<span>💡</span>
-										Key Insights
-									</h3>
-									<ul className="space-y-2 text-sm text-slate-700">
-										<li className="flex items-start gap-2">
-											<span className="text-blue-600 mt-0.5">•</span>
-											<span><strong>Bias Score {(analyzeResult.bias_metrics.overall_bias_score * 100).toFixed(1)}%</strong> indicates 
-											{analyzeResult.bias_metrics.overall_bias_score < 0.3 ? ' strong fairness with minimal disparities across groups.' 
-												: analyzeResult.bias_metrics.overall_bias_score < 0.5 ? ' moderate disparities that should be monitored and addressed.'
-												: ' significant unfairness requiring immediate remediation before deployment.'}</span>
-										</li>
-										<li className="flex items-start gap-2">
-											<span className="text-blue-600 mt-0.5">•</span>
-											<span><strong>Model achieves {(analyzeResult.model_performance.accuracy * 100).toFixed(1)}% accuracy</strong>, 
-											but fairness metrics reveal how performance varies across demographic groups.</span>
-										</li>
-										{analyzeResult.bias_metrics.violations_detected.length > 0 ? (
-											<li className="flex items-start gap-2">
-												<span className="text-red-600 mt-0.5">•</span>
-												<span className="text-red-700"><strong>{analyzeResult.bias_metrics.violations_detected.length} violation(s)</strong> detected. 
-												Review mitigation tab for recommended actions to improve fairness.</span>
-											</li>
-										) : (
-											<li className="flex items-start gap-2">
-												<span className="text-green-600 mt-0.5">•</span>
-												<span className="text-green-700"><strong>No violations detected.</strong> Model meets fairness thresholds across all protected attributes.</span>
-											</li>
-										)}
-									</ul>
-								</div>
-							</div>
-						) : (
-							<div className="text-center py-12">
-								<div className="text-6xl mb-4">📊</div>
-								<p className="text-slate-600 mb-2">No analysis results yet</p>
-								<p className="text-sm text-slate-500">Upload a dataset and click "Analyze" to see bias and fairness metrics</p>
-							</div>
-						)}
-					</div>
-				);
-			case "risk-analysis":
-				return (
-					<div className="space-y-6">
-						{analyzeResult ? (
-							<div className="space-y-6">
-								{/* Header: RISK ANALYSIS SUMMARY */}
-								<div className="relative overflow-hidden rounded-xl border-2 border-slate-300 bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900 p-8 shadow-2xl">
-									<div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-full blur-3xl"></div>
-									<div className="relative">
-										<div className="flex items-center gap-3 mb-6 pb-4 border-b border-slate-600">
-											<span className="text-4xl">🔒</span>
-											<h2 className="text-3xl font-black text-white tracking-tight">RISK ANALYSIS SUMMARY</h2>
-										</div>
-										
-										<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-											{/* Overall Risk */}
-											<div className="bg-white/10 backdrop-blur-sm rounded-xl p-5 border border-white/20">
-												<div className="text-sm font-medium text-slate-300 mb-2">📊 Overall Risk</div>
-												<div className="text-5xl font-black text-white mb-2">
-													{(analyzeResult.risk_assessment.overall_risk_score * 100).toFixed(1)}%
-												</div>
-												<div className={`inline-flex px-3 py-1 rounded-full text-xs font-bold ${
-													analyzeResult.risk_assessment.risk_level === 'CRITICAL' ? 'bg-red-500 text-white' :
-													analyzeResult.risk_assessment.risk_level === 'HIGH' ? 'bg-orange-500 text-white' :
-													analyzeResult.risk_assessment.risk_level === 'MEDIUM' ? 'bg-yellow-500 text-slate-900' :
-													'bg-green-500 text-white'
-												}`}>
-													{analyzeResult.risk_assessment.risk_level}
-												</div>
-											</div>
+        // The backend returns a CSV file
+        const blob = await res.blob();
+        const downloadUrl = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = downloadUrl;
+        a.download = "dataset.csv";
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
 
-											{/* Presidio Status */}
-											<div className="bg-white/10 backdrop-blur-sm rounded-xl p-5 border border-white/20">
-												<div className="text-sm font-medium text-slate-300 mb-2">🔒 Detection Engine</div>
-												<div className="text-2xl font-bold text-white mb-2">
-													{analyzeResult.risk_assessment.presidio_enabled ? 'Presidio' : 'Regex'}
-												</div>
-												<div className={`inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold ${
-													analyzeResult.risk_assessment.presidio_enabled 
-														? 'bg-blue-500 text-white' 
-														: 'bg-slate-600 text-slate-200'
-												}`}>
-													<span className={`w-2 h-2 rounded-full ${
-														analyzeResult.risk_assessment.presidio_enabled ? 'bg-white animate-pulse' : 'bg-slate-400'
-													}`}></span>
-													{analyzeResult.risk_assessment.presidio_enabled ? 'Enhanced' : 'Standard'}
-												</div>
-											</div>
+        setProgressLabel("File processed successfully");
+      } catch (err: any) {
+        setError(err.message || "File processing failed");
+      } finally {
+        setIsProcessing(false);
+      }
+      return; // stop further processing since we’re done
+    }
 
-											{/* Violations */}
-											<div className="bg-white/10 backdrop-blur-sm rounded-xl p-5 border border-white/20">
-												<div className="text-sm font-medium text-slate-300 mb-2">⚠️ Violations</div>
-												<div className={`text-5xl font-black mb-2 ${
-													(analyzeResult.risk_assessment.violations?.length || 0) > 0 
-														? 'text-red-400' 
-														: 'text-green-400'
-												}`}>
-													{analyzeResult.risk_assessment.violations?.length || 0}
-												</div>
-												<div className="text-xs text-slate-300">
-													{(analyzeResult.risk_assessment.violations?.filter((v: any) => v.severity === 'CRITICAL').length || 0)} Critical Issues
-												</div>
-											</div>
-										</div>
-									</div>
-								</div>
+    setProgress(0);
+    setUploadedFile(f); // Save the file for API calls
 
-								{/* Risk Categories Grid with Enhanced Design */}
-								<div className="bg-white rounded-xl border-2 border-slate-200 p-6 shadow-lg">
-									<div className="flex items-center gap-2 mb-6">
-										<span className="text-2xl">📈</span>
-										<h3 className="text-xl font-bold text-slate-800">Category Scores</h3>
-									</div>
-									
-									<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-										{Object.entries(analyzeResult.risk_assessment.risk_categories || {}).map(([category, score]: [string, any]) => {
-											const riskPct = (score * 100);
-											const riskLevel = riskPct >= 70 ? 'CRITICAL' : riskPct >= 50 ? 'HIGH' : riskPct >= 30 ? 'MEDIUM' : 'LOW';
-											const categoryConfig: Record<string, { icon: string; label: string; color: string }> = {
-												privacy: { icon: '�', label: 'Privacy', color: 'blue' },
-												ethical: { icon: '🟠', label: 'Ethical', color: 'purple' },
-												compliance: { icon: '�', label: 'Compliance', color: 'indigo' },
-												security: { icon: '�', label: 'Security', color: 'cyan' },
-												operational: { icon: '🟠', label: 'Operational', color: 'orange' },
-												data_quality: { icon: '�', label: 'Data Quality', color: 'green' }
-											};
-											
-											const config = categoryConfig[category] || { icon: '📌', label: category, color: 'slate' };
-											
-											// Dynamic emoji based on risk level
-											const riskEmoji = riskPct < 25 ? '🟢' : riskPct < 50 ? '🟡' : '🟠';
-											
-											return (
-												<div key={category} className={`relative overflow-hidden rounded-xl border-2 p-5 transition-all hover:shadow-xl hover:scale-105 ${
-													riskLevel === 'CRITICAL' ? 'border-red-300 bg-gradient-to-br from-red-50 via-white to-red-50' :
-													riskLevel === 'HIGH' ? 'border-orange-300 bg-gradient-to-br from-orange-50 via-white to-orange-50' :
-													riskLevel === 'MEDIUM' ? 'border-yellow-300 bg-gradient-to-br from-yellow-50 via-white to-yellow-50' :
-													'border-green-300 bg-gradient-to-br from-green-50 via-white to-green-50'
-												}`}>
-													<div className="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-white/50 to-transparent rounded-full blur-2xl"></div>
-													
-													<div className="relative">
-														<div className="flex items-start justify-between mb-3">
-															<span className="text-3xl">{riskEmoji}</span>
-															<span className={`text-xs font-black px-2.5 py-1 rounded-full shadow-sm ${
-																riskLevel === 'CRITICAL' ? 'bg-red-600 text-white' :
-																riskLevel === 'HIGH' ? 'bg-orange-600 text-white' :
-																riskLevel === 'MEDIUM' ? 'bg-yellow-600 text-white' :
-																'bg-green-600 text-white'
-															}`}>
-																{riskLevel}
-															</span>
-														</div>
-														
-														<div className="text-sm font-bold text-slate-600 uppercase tracking-wide mb-2">
-															{config.label}
-														</div>
-														
-														<div className="text-4xl font-black bg-gradient-to-r from-slate-800 to-slate-600 bg-clip-text text-transparent mb-3">
-															{riskPct.toFixed(1)}%
-														</div>
-														
-														{/* Progress Bar */}
-														<div className="relative h-2 bg-slate-200 rounded-full overflow-hidden shadow-inner">
-															<div 
-																className={`absolute inset-y-0 left-0 rounded-full transition-all duration-700 ease-out ${
-																	riskLevel === 'CRITICAL' ? 'bg-gradient-to-r from-red-500 via-red-600 to-red-700' :
-																	riskLevel === 'HIGH' ? 'bg-gradient-to-r from-orange-500 via-orange-600 to-orange-700' :
-																	riskLevel === 'MEDIUM' ? 'bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700' :
-																	'bg-gradient-to-r from-green-500 via-green-600 to-green-700'
-																}`}
-																style={{ width: `${Math.min(riskPct, 100)}%` }}
-															>
-																<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse"></div>
-															</div>
-														</div>
-													</div>
-												</div>
-											);
-										})}
-									</div>
-								</div>
+    // For large files, show a progress bar while reading the file stream (no preview)
+    if (f.size > 1024 * 1024) {
+      setProgressLabel("Uploading");
+      const metaObj: UploadedFileMeta = {
+        name: f.name,
+        size: f.size,
+        type: f.type || "unknown",
+        contentPreview: `Loading partial preview (first ${Math.round(PREVIEW_BYTES / 1024)}KB)...`,
+      };
+      setFileMeta(metaObj);
+      setTablePreview(null);
+      // Save to IndexedDB immediately so it persists without needing full read
+      (async () => {
+        try {
+          await saveLatestUpload(f, metaObj);
+        } catch {}
+      })();
+      // Read head slice for partial preview & possible CSV table extraction
+      try {
+        const headBlob = f.slice(0, PREVIEW_BYTES);
+        const headReader = new FileReader();
+        headReader.onload = async () => {
+          try {
+            const buf = headReader.result as ArrayBuffer;
+            const decoder = new TextDecoder();
+            const text = decoder.decode(buf);
+            setFileMeta((prev) =>
+              prev ? { ...prev, contentPreview: text.slice(0, 4000) } : prev,
+            );
+            if (isCSV) {
+              const parsed = tryParseCSV(text);
+              setTablePreview(parsed);
+            } else {
+              setTablePreview(null);
+            }
+            try {
+              await saveLatestUpload(f, {
+                ...metaObj,
+                contentPreview: text.slice(0, 4000),
+              });
+            } catch {}
+          } catch {
+            /* ignore */
+          }
+        };
+        headReader.readAsArrayBuffer(headBlob);
+      } catch {
+        /* ignore */
+      }
+      // Use streaming read for progress without buffering entire file in memory
+      try {
+        const stream: ReadableStream<Uint8Array> | undefined =
+          typeof (f as any).stream === "function"
+            ? (f as any).stream()
+            : undefined;
+        if (stream && typeof stream.getReader === "function") {
+          const reader = stream.getReader();
+          let loaded = 0;
+          const total = f.size || 1;
+          for (;;) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            loaded += value ? value.length : 0;
+            const pct = Math.min(100, Math.round((loaded / total) * 100));
+            setProgress(pct);
+          }
+          setProgress(100);
+        } else {
+          // Fallback to FileReader progress events
+          const reader = new FileReader();
+          reader.onprogress = (evt) => {
+            if (evt.lengthComputable) {
+              const pct = Math.min(
+                100,
+                Math.round((evt.loaded / evt.total) * 100),
+              );
+              setProgress(pct);
+            } else {
+              setProgress((p) => (p < 90 ? p + 5 : p));
+            }
+          };
+          reader.onloadend = () => setProgress(100);
+          reader.onerror = () => setProgress(0);
+          reader.readAsArrayBuffer(f);
+        }
+      } catch {
+        setProgress(100);
+      }
+      return;
+    }
+    const reader = new FileReader();
+    reader.onprogress = (evt) => {
+      if (evt.lengthComputable) {
+        const pct = Math.min(100, Math.round((evt.loaded / evt.total) * 100));
+        setProgress(pct);
+      } else {
+        setProgress((p) => (p < 90 ? p + 5 : p));
+      }
+    };
+    reader.onload = async () => {
+      try {
+        const buf = reader.result as ArrayBuffer;
+        const decoder = new TextDecoder();
+        const text = decoder.decode(buf);
+        const metaObj: UploadedFileMeta = {
+          name: f.name,
+          size: f.size,
+          type: f.type || "unknown",
+          contentPreview: text.slice(0, 4000),
+        };
+        setFileMeta(metaObj);
+        if (isCSV) {
+          const parsed = tryParseCSV(text);
+          setTablePreview(parsed);
+        } else {
+          setTablePreview(null);
+        }
+        // Save file blob and meta to browser cache (IndexedDB)
+        try {
+          await saveLatestUpload(f, metaObj);
+        } catch {}
+        setProgressLabel("Processing");
+        setProgress(100);
+      } catch (e) {
+        const metaObj: UploadedFileMeta = {
+          name: f.name,
+          size: f.size,
+          type: f.type || "unknown",
+          contentPreview: "Unable to decode preview.",
+        };
+        setFileMeta(metaObj);
+        setTablePreview(null);
+        try {
+          await saveLatestUpload(f, metaObj);
+        } catch {}
+        setProgressLabel("Processing");
+        setProgress(100);
+      }
+    };
+    reader.onerror = () => {
+      setProgress(0);
+    };
+    reader.readAsArrayBuffer(f);
+  }, []);
 
-							{/* Risky Features Analysis - Feature-Level Risk Display */}
-							{analyzeResult.risk_assessment.privacy_risks && (
-								<div className="bg-white rounded-xl border-2 border-slate-200 p-6 shadow-lg">
-									<div className="flex items-center gap-2 mb-6">
-										<span className="text-2xl">⚠️</span>
-										<h3 className="text-xl font-bold text-slate-800">Risky Features & Columns</h3>
-										<span className="ml-auto px-3 py-1 bg-red-100 text-red-700 rounded-full text-xs font-semibold">
-											{typeof analyzeResult.risk_assessment.privacy_risks === 'object' && !Array.isArray(analyzeResult.risk_assessment.privacy_risks)
-												? (analyzeResult.risk_assessment.privacy_risks.pii_count || 0)
-												: (Array.isArray(analyzeResult.risk_assessment.privacy_risks) ? analyzeResult.risk_assessment.privacy_risks.length : 0)} Risky Features Found
-										</span>
-									</div>
+  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const f = e.target.files?.[0];
+    processFile(f as File);
+  }
 
-									{/* Risky Features List */}
-									{(typeof analyzeResult.risk_assessment.privacy_risks === 'object' && 
-									  !Array.isArray(analyzeResult.risk_assessment.privacy_risks) &&
-									  analyzeResult.risk_assessment.privacy_risks.pii_detected && 
-									  analyzeResult.risk_assessment.privacy_risks.pii_detected.length > 0) ? (
-										<div className="space-y-4">
-											{/* Privacy Risk Metrics Summary */}
-											<div className="grid grid-cols-2 md:grid-cols-4 gap-3 p-4 bg-gradient-to-br from-red-50 to-orange-50 rounded-lg border-2 border-red-200">
-												<div className="text-center">
-													<div className="text-xs text-slate-600 mb-1 font-semibold">Re-Identification Risk</div>
-													<div className={`text-3xl font-black ${
-														(analyzeResult.risk_assessment.privacy_risks.reidentification_risk || 0) > 0.7 ? 'text-red-600' :
-														(analyzeResult.risk_assessment.privacy_risks.reidentification_risk || 0) > 0.4 ? 'text-orange-600' :
-														'text-green-600'
-													}`}>
-														{analyzeResult.risk_assessment.privacy_risks.reidentification_risk 
-															? (analyzeResult.risk_assessment.privacy_risks.reidentification_risk * 100).toFixed(0) 
-															: 0}%
-													</div>
-													<div className="text-xs text-slate-500 mt-1">Can individuals be identified?</div>
-												</div>
-												<div className="text-center">
-													<div className="text-xs text-slate-600 mb-1 font-semibold">Data Minimization</div>
-													<div className={`text-3xl font-black ${
-														(analyzeResult.risk_assessment.privacy_risks.data_minimization_score || 0) > 0.7 ? 'text-green-600' :
-														(analyzeResult.risk_assessment.privacy_risks.data_minimization_score || 0) > 0.4 ? 'text-orange-600' :
-														'text-red-600'
-													}`}>
-														{analyzeResult.risk_assessment.privacy_risks.data_minimization_score 
-															? (analyzeResult.risk_assessment.privacy_risks.data_minimization_score * 100).toFixed(0) 
-															: 0}%
-													</div>
-													<div className="text-xs text-slate-500 mt-1">Collecting only necessary data</div>
-												</div>
-												<div className="text-center">
-													<div className="text-xs text-slate-600 mb-1 font-semibold">Anonymization Level</div>
-													<div className={`text-sm font-black px-3 py-1 rounded-full inline-block ${
-														analyzeResult.risk_assessment.privacy_risks.anonymization_level === 'FULL' ? 'bg-green-100 text-green-700' :
-														analyzeResult.risk_assessment.privacy_risks.anonymization_level === 'PARTIAL' ? 'bg-yellow-100 text-yellow-700' :
-														'bg-red-100 text-red-700'
-													}`}>
-														{analyzeResult.risk_assessment.privacy_risks.anonymization_level || 'NONE'}
-													</div>
-													<div className="text-xs text-slate-500 mt-1">Protection applied</div>
-												</div>
-												<div className="text-center">
-													<div className="text-xs text-slate-600 mb-1 font-semibold">Detection Method</div>
-													<div className="text-sm font-bold text-slate-800 px-3 py-1 bg-white rounded border-2 border-slate-300 inline-block">
-														{analyzeResult.risk_assessment.privacy_risks.detection_method || 'Auto'}
-													</div>
-													<div className="text-xs text-slate-500 mt-1">Analysis engine used</div>
-												</div>
-											</div>
+  const onDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+  const onDragLeave = () => setIsDragging(false);
+  const onDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const f = e.dataTransfer.files?.[0];
+    processFile(f as File);
+  };
 
-											{/* Individual Risky Features */}
-											<div className="space-y-3">
-												<h4 className="font-bold text-slate-700 flex items-center gap-2">
-													<span>🔍</span> Detailed Feature Risk Analysis
-												</h4>
-												{analyzeResult.risk_assessment.privacy_risks.pii_detected.map((pii: any, idx: number) => {
-													// Map PII types to risk explanations with GDPR Article references
-													const riskExplanations: Record<string, { why: string; impact: string; gdprArticles: string[]; actions: string[] }> = {
-														'EMAIL_ADDRESS': { 
-															why: 'Email addresses are direct identifiers that can be used to contact and track individuals across systems, creating privacy risks.',
-															impact: 'HIGH RISK: Can lead to identity theft, phishing attacks, unauthorized marketing, and privacy violations under GDPR Article 6.',
-															gdprArticles: [
-																'Article 4(1) - Definition of Personal Data: Email is personally identifiable information',
-																'Article 6 - Lawful Basis Required: Processing requires consent, contract, or legitimate interest',
-																'Article 7 - Consent Conditions: Must obtain explicit, informed consent',
-																'Article 17 - Right to Erasure: Users can request email deletion',
-																'Article 21 - Right to Object: Users can opt out of email processing'
-															],
-															actions: ['Encrypt email addresses', 'Hash or pseudonymize for analytics', 'Implement consent management', 'Enable right to erasure', 'Provide opt-out mechanisms']
-														},
-														'EMAIL': { 
-															why: 'Email addresses are direct identifiers that can be used to contact and track individuals across systems.',
-															impact: 'HIGH RISK: Can lead to identity theft, phishing attacks, unauthorized marketing, and privacy violations.',
-															gdprArticles: [
-																'Article 4(1) - Personal Data Definition',
-																'Article 6 - Lawful Basis for Processing',
-																'Article 7 - Conditions for Consent',
-																'Article 17 - Right to Erasure'
-															],
-															actions: ['Encrypt email addresses', 'Implement consent management', 'Enable deletion on request', 'Apply data minimization']
-														},
-														'PHONE_NUMBER': { 
-															why: 'Phone numbers directly identify individuals and enable real-time contact, creating opportunities for harassment and fraud.',
-															impact: 'HIGH RISK: Enables unwanted contact, harassment, SIM swapping attacks, location tracking, and telemarketing violations.',
-															gdprArticles: [
-																'Article 4(1) - Personal Data: Phone numbers identify natural persons',
-																'Article 6 - Lawfulness of Processing: Requires lawful basis',
-																'Article 32 - Security of Processing: Must implement appropriate security measures',
-																'Article 21 - Right to Object to Processing',
-																'ePrivacy Directive - Consent required for electronic communications'
-															],
-															actions: ['Remove if not essential', 'Apply tokenization', 'Restrict access controls', 'Implement call verification', 'Enable number suppression']
-														},
-														'PHONE': { 
-															why: 'Phone numbers are direct personal identifiers enabling contact and tracking.',
-															impact: 'HIGH RISK: Harassment, fraud, and unauthorized marketing.',
-															gdprArticles: [
-																'Article 4(1) - Personal Data',
-																'Article 6 - Lawful Processing',
-																'Article 32 - Security Measures'
-															],
-															actions: ['Tokenize phone numbers', 'Implement access controls', 'Enable opt-out']
-														},
-														'PERSON': { 
-															why: 'Personal names are primary identifiers. Combined with other quasi-identifiers (age, location), they enable complete re-identification.',
-															impact: 'MEDIUM-HIGH RISK: When combined with location, age, or other quasi-identifiers, creates high re-identification risk violating k-anonymity.',
-															gdprArticles: [
-																'Article 4(1) - Personal Data: Names identify natural persons',
-																'Article 5(1)(c) - Data Minimization: Collect only necessary data',
-																'Article 5(1)(e) - Storage Limitation: Keep only as long as necessary',
-																'Article 25 - Data Protection by Design and Default',
-																'Article 32(1)(a) - Pseudonymization and encryption requirements'
-															],
-															actions: ['Use pseudonyms or IDs', 'Apply k-anonymity techniques (k≥5)', 'Separate name from sensitive attributes', 'Implement access logging', 'Apply l-diversity for protection']
-														},
-														'NAME': { 
-															why: 'Names are direct personal identifiers that enable individual identification.',
-															impact: 'MEDIUM-HIGH RISK: Re-identification when combined with other data.',
-															gdprArticles: [
-																'Article 4(1) - Personal Data',
-																'Article 5(1)(c) - Data Minimization',
-																'Article 25 - Data Protection by Design'
-															],
-															actions: ['Use pseudonyms', 'Apply k-anonymity', 'Implement access logging']
-														},
-														'LOCATION': { 
-															why: 'Location data reveals where individuals live, work, and travel, exposing personal patterns, habits, and sensitive locations (hospitals, religious sites).',
-															impact: 'HIGH RISK: Can expose home addresses, workplaces, medical facilities, places of worship, creating discrimination and stalking risks.',
-															gdprArticles: [
-																'Article 4(1) - Personal Data: Location identifies individuals',
-																'Article 9(1) - Special Categories: Location at sensitive sites reveals protected characteristics',
-																'Article 32 - Security Measures: Encryption and access controls required',
-																'Article 35 - Data Protection Impact Assessment: Required for location tracking',
-																'Recital 30 - Online identifiers and location data'
-															],
-															actions: ['Generalize to zip code or city level', 'Apply geographic masking', 'Remove precise coordinates', 'Implement geofencing', 'Conduct DPIA', 'Apply differential privacy']
-														},
-														'ADDRESS': { 
-															why: 'Physical addresses directly identify individuals and their home locations.',
-															impact: 'HIGH RISK: Enables stalking, burglary, and privacy violations.',
-															gdprArticles: [
-																'Article 4(1) - Personal Data',
-																'Article 9 - Special Categories (if sensitive location)',
-																'Article 32 - Security Measures'
-															],
-															actions: ['Generalize to zip code', 'Apply geographic masking', 'Restrict access']
-														},
-														'SSN': { 
-															why: 'Social Security Numbers are PERMANENT unique identifiers used across critical systems (banking, taxes, healthcare, employment).',
-															impact: 'CRITICAL RISK: Enables complete identity theft, fraudulent credit, tax fraud, medical identity theft, and unauthorized government benefits access.',
-															gdprArticles: [
-																'Article 9(1) - Special Category Data: Often linked to health/financial data',
-																'Article 32 - Security of Processing: Encryption, access controls, pseudonymization mandatory',
-																'Article 33 - Breach Notification: Immediate notification required',
-																'Article 34 - Data Subject Notification: Notify individuals of breaches',
-																'Article 35 - Data Protection Impact Assessment: DPIA required',
-																'Recital 75 - High risk to rights and freedoms'
-															],
-															actions: ['REMOVE IMMEDIATELY if possible', 'Encrypt with AES-256', 'Never display in full', 'Implement strict access controls', 'Conduct DPIA', 'Enable breach detection', 'Maintain audit logs']
-														},
-														'US_SSN': { 
-															why: 'US Social Security Numbers are permanent government identifiers linked to financial, medical, employment, and government benefits.',
-															impact: 'CRITICAL RISK: Highest identity theft risk. Compromise leads to decades of fraud, financial damage, and cannot be changed.',
-															gdprArticles: [
-																'Article 9(1) - Special Category: Links to health and financial data',
-																'Article 32 - Security Measures: State-of-the-art encryption required',
-																'Article 33 - Breach Notification: 72-hour notification to supervisory authority',
-																'Article 34 - Communication to Data Subjects: Immediate notification',
-																'Article 35 - DPIA: Mandatory impact assessment'
-															],
-															actions: ['Encrypt end-to-end with AES-256', 'Use last 4 digits only for display', 'Implement multi-factor authentication', 'Enable breach detection', 'Create comprehensive audit trails', 'Apply tokenization', 'Conduct annual security audits']
-														},
-														'CREDIT_CARD': { 
-															why: 'Credit card numbers provide direct access to financial accounts and purchasing power, subject to PCI-DSS and GDPR.',
-															impact: 'CRITICAL RISK: Financial fraud, unauthorized transactions, PCI-DSS violations (fines up to $500K/month), GDPR violations (4% global revenue).',
-															gdprArticles: [
-																'Article 4(1) - Personal Data: Financial identifiers',
-																'Article 32 - Security of Processing: PCI-DSS Level 1 compliance mandatory',
-																'Article 33 - Breach Notification: Immediate reporting required',
-																'Article 34 - Data Subject Notification',
-																'PCI-DSS Standards: Cannot store CVV, must tokenize'
-															],
-															actions: ['Tokenize immediately', 'Never store CVV/CVC', 'Use PCI-compliant vault', 'Implement fraud detection', 'Apply end-to-end encryption', 'Use 3D Secure', 'Maintain PCI-DSS certification', 'Conduct quarterly security scans']
-														},
-														'CARD': { 
-															why: 'Card numbers enable direct financial access.',
-															impact: 'CRITICAL RISK: Financial fraud and PCI-DSS violations.',
-															gdprArticles: [
-																'Article 4(1) - Personal Data',
-																'Article 32 - Security Measures',
-																'PCI-DSS Compliance'
-															],
-															actions: ['Tokenize immediately', 'Use PCI-compliant vault', 'Never store CVV']
-														},
-														'IP_ADDRESS': { 
-															why: 'IP addresses are online identifiers that track user behavior, reveal location, and enable device fingerprinting across websites.',
-															impact: 'MEDIUM RISK: Enables tracking across websites, reveals approximate location, can be linked to individuals, violates ePrivacy Directive.',
-															gdprArticles: [
-																'Article 4(1) - Personal Data: Online identifier',
-																'Article 6 - Lawful Basis: Requires consent or legitimate interest',
-																'ePrivacy Directive - Consent for cookies and tracking',
-																'Recital 30 - Online identifiers and IP addresses',
-																'Article 21 - Right to Object to profiling'
-															],
-															actions: ['Truncate last octet for IPv4', 'Hash for analytics', 'Implement IP anonymization', 'Reduce retention period to 90 days', 'Provide opt-out for tracking', 'Apply differential privacy']
-														},
-														'IP': { 
-															why: 'IP addresses are online identifiers enabling tracking.',
-															impact: 'MEDIUM RISK: Cross-site tracking and location revelation.',
-															gdprArticles: [
-																'Article 4(1) - Online Identifier',
-																'Article 6 - Lawful Basis',
-																'ePrivacy Directive'
-															],
-															actions: ['Truncate IP addresses', 'Hash for analytics', 'Reduce retention']
-														},
-														'MEDICAL_LICENSE': { 
-															why: 'Medical information is SPECIAL CATEGORY DATA under GDPR Article 9, requiring the highest level of protection due to discrimination risks.',
-															impact: 'CRITICAL RISK: Health data breach leads to discrimination, insurance denial, employment issues, severe privacy violations, and HIPAA fines.',
-															gdprArticles: [
-																'Article 9(1) - Special Category (Health Data): Explicit consent required',
-																'Article 9(2)(h) - Health/social care exception',
-																'Article 32 - Security of Processing: Encryption mandatory',
-																'Article 35 - DPIA: Impact assessment required',
-																'Article 25 - Data Protection by Design',
-																'HIPAA Compliance (if applicable)'
-															],
-															actions: ['Encrypt with healthcare-grade security (AES-256)', 'Implement role-based access control (RBAC)', 'Conduct Data Protection Impact Assessment', 'Apply strict retention policies', 'Ensure HIPAA compliance', 'Use de-identification techniques', 'Maintain comprehensive audit logs']
-														},
-														'MEDICAL': { 
-															why: 'Medical data is special category data requiring explicit consent.',
-															impact: 'CRITICAL RISK: Discrimination and severe privacy violations.',
-															gdprArticles: [
-																'Article 9(1) - Special Category (Health)',
-																'Article 32 - Security',
-																'Article 35 - DPIA Required'
-															],
-															actions: ['Encrypt data', 'Implement RBAC', 'Conduct DPIA']
-														},
-														'US_DRIVER_LICENSE': { 
-															why: 'Driver license numbers are government-issued identifiers used for identity verification across financial, healthcare, and government systems.',
-															impact: 'HIGH RISK: Identity fraud, fake ID creation, unauthorized access to services, and DMV record access.',
-															gdprArticles: [
-																'Article 4(1) - Personal Data: Government identifier',
-																'Article 6 - Lawful Processing: Document lawful basis',
-																'Article 32 - Security Measures: Encryption and access controls',
-																'Article 15 - Right of Access: Individuals can request data',
-																'Article 17 - Right to Erasure: Deletion on request'
-															],
-															actions: ['Hash or encrypt license numbers', 'Limit to identity verification only', 'Never display in full', 'Implement verification logging', 'Apply pseudonymization', 'Enable deletion mechanisms']
-														},
-														'LICENSE': { 
-															why: 'License numbers are government identifiers.',
-															impact: 'HIGH RISK: Identity fraud and unauthorized access.',
-															gdprArticles: [
-																'Article 4(1) - Personal Data',
-																'Article 6 - Lawful Processing',
-																'Article 32 - Security'
-															],
-															actions: ['Hash license numbers', 'Limit to verification', 'Never display in full']
-														},
-														'US_PASSPORT': { 
-															why: 'Passport numbers are international identity documents used for travel and high-security identification, recognized globally.',
-															impact: 'CRITICAL RISK: International identity fraud, unauthorized travel booking, visa fraud, and access to secure facilities.',
-															gdprArticles: [
-																'Article 4(1) - Personal Data: Unique government identifier',
-																'Article 32 - Security Measures: State-of-the-art encryption required',
-																'Article 35 - Impact Assessment: DPIA for high-risk processing',
-																'Article 5(1)(f) - Integrity and Confidentiality',
-																'Cross-border data transfer regulations'
-															],
-															actions: ['Encrypt with strong encryption (AES-256)', 'Restrict access to authorized personnel only', 'Implement tamper detection', 'Apply geographic access controls', 'Maintain detailed audit trails', 'Use tokenization', 'Implement MFA for access']
-														},
-														'PASSPORT': { 
-															why: 'Passport numbers enable international identification.',
-															impact: 'CRITICAL RISK: International fraud and unauthorized travel.',
-															gdprArticles: [
-																'Article 4(1) - Personal Data',
-																'Article 32 - Security Measures',
-																'Article 35 - Impact Assessment'
-															],
-															actions: ['Encrypt passports', 'Restrict access', 'Implement tamper detection']
-														},
-														'US_BANK_NUMBER': { 
-															why: 'Bank account numbers provide DIRECT ACCESS to financial accounts and enable ACH transfers, wire transfers, and direct debits.',
-															impact: 'CRITICAL RISK: Unauthorized withdrawals, ACH fraud, wire transfer fraud, complete account takeover, and financial ruin.',
-															gdprArticles: [
-																'Article 4(1) - Personal Data: Financial identifier',
-																'Article 32 - Security Measures: Encryption and tokenization mandatory',
-																'Article 33 - Breach Notification: 72-hour notification',
-																'Article 34 - Data Subject Notification: Immediate alert to account holders',
-																'PSD2 - Strong Customer Authentication required'
-															],
-															actions: ['Tokenize immediately', 'Never display account numbers', 'Use secure payment gateways', 'Implement transaction monitoring', 'Apply multi-factor authentication', 'Use Strong Customer Authentication (SCA)', 'Enable fraud alerts', 'Encrypt at rest and in transit']
-														},
-														'BANK_ACCOUNT': { 
-															why: 'Bank account numbers enable direct financial access.',
-															impact: 'CRITICAL RISK: Financial fraud and account takeover.',
-															gdprArticles: [
-																'Article 4(1) - Personal Data',
-																'Article 32 - Security Measures',
-																'Article 33 - Breach Notification'
-															],
-															actions: ['Tokenize accounts', 'Never display numbers', 'Implement MFA']
-														},
-														'DOB': { 
-															why: 'Date of birth is a quasi-identifier that combined with other data enables re-identification and age-based discrimination.',
-															impact: 'MEDIUM-HIGH RISK: Combined with name and zip code, enables 87% re-identification rate. Age discrimination risk.',
-															gdprArticles: [
-																'Article 4(1) - Personal Data: Quasi-identifier',
-																'Article 5(1)(c) - Data Minimization: Use age ranges instead',
-																'Article 9 - Special Categories: Can reveal protected characteristics',
-																'Article 22 - Automated Decision-Making: Age-based profiling restrictions',
-																'Recital 26 - Pseudonymization reduces risks'
-															],
-															actions: ['Use age ranges instead of exact DOB', 'Apply k-anonymity (k≥5)', 'Generalize to year or month', 'Separate from other identifiers', 'Implement access controls', 'Apply l-diversity']
-														},
-														'ZIP_CODE': { 
-															why: 'ZIP codes are geographic quasi-identifiers. Research shows 87% of US population uniquely identified by ZIP + DOB + Gender.',
-															impact: 'MEDIUM RISK: When combined with DOB and gender, enables 87% re-identification. Reveals socioeconomic status and demographics.',
-															gdprArticles: [
-																'Article 4(1) - Personal Data: Quasi-identifier',
-																'Article 5(1)(c) - Data Minimization',
-																'Article 32(1)(a) - Pseudonymization',
-																'Recital 26 - Anonymization techniques',
-																'Article 25 - Data Protection by Default'
-															],
-															actions: ['Generalize to first 3 digits', 'Use geographic aggregation', 'Apply k-anonymity', 'Combine with other anonymization techniques', 'Separate from name and DOB']
-														},
-														'IBAN_CODE': { 
-															why: 'IBAN (International Bank Account Number) provides access to bank accounts across European Economic Area.',
-															impact: 'CRITICAL RISK: International financial fraud, SEPA direct debit fraud, and cross-border money theft.',
-															gdprArticles: [
-																'Article 4(1) - Personal Data',
-																'Article 32 - Security of Processing',
-																'Article 33 - Breach Notification',
-																'PSD2 - Strong Customer Authentication'
-															],
-															actions: ['Tokenize IBAN', 'Implement SCA', 'Use secure payment processors', 'Enable fraud monitoring', 'Apply encryption']
-														},
-														'CRYPTO': { 
-															why: 'Cryptocurrency addresses and wallets are permanent financial identifiers that cannot be changed if compromised.',
-															impact: 'CRITICAL RISK: Irreversible financial theft, no fraud protection, transaction history exposure, wallet draining.',
-															gdprArticles: [
-																'Article 4(1) - Personal Data: Cryptocurrency addresses can identify individuals',
-																'Article 5(1)(f) - Security Principle',
-																'Article 32 - Security Measures: Multi-signature and cold storage',
-																'Article 17 - Right to Erasure: Blockchain immutability challenges'
-															],
-															actions: ['Use multi-signature wallets', 'Implement cold storage', 'Never display private keys', 'Use hardware security modules', 'Apply address rotation', 'Implement withdrawal limits']
-														}
-													};
+  // Load last cached upload on mount (processing tab only)
+  useEffect(() => {
+    let ignore = false;
+    if (tab !== "processing") return;
+    (async () => {
+      try {
+        const { file, meta } = await getLatestUpload();
+        if (!ignore && meta) {
+          setFileMeta(meta as UploadedFileMeta);
+          if (file) {
+            setUploadedFile(file);
+          }
+          setLoadedFromCache(true);
+        }
+      } catch {}
+    })();
+    return () => {
+      ignore = true;
+    };
+  }, [tab]);
+  function renderTabContent() {
+    switch (tab) {
+      case "processing":
+        return (
+          <div className="space-y-4 max-w-[1100px] xl:max-w-[1200px] w-full mx-auto">
+            <h2 className="text-xl font-semibold">Upload & Process Data</h2>
+            <p className="text-sm text-slate-600">
+              Upload a CSV / JSON / text file. We will later parse, detect PII,
+              and queue analyses.
+            </p>
+            <div className="flex flex-col gap-3 min-w-0">
+              <div
+                onDragOver={onDragOver}
+                onDragLeave={onDragLeave}
+                onDrop={onDrop}
+                className={
+                  "rounded-lg border-2 border-dashed p-6 text-center transition-colors " +
+                  (isDragging
+                    ? "border-brand-600 bg-brand-50"
+                    : "border-slate-300 hover:border-brand-300")
+                }
+              >
+                <p className="text-sm text-slate-600">
+                  Drag & drop a CSV / JSON / TXT here, or click to browse.
+                </p>
+                <div className="mt-3">
+                  <button
+                    type="button"
+                    onClick={() => inputRef.current?.click()}
+                    className="inline-flex items-center rounded-md bg-brand-600 px-4 py-2 text-white text-sm font-medium shadow hover:bg-brand-500"
+                  >
+                    Choose file
+                  </button>
+                </div>
+              </div>
+              <input
+                ref={inputRef}
+                type="file"
+                accept=".csv,.json,.txt"
+                onChange={handleFileChange}
+                className="hidden"
+                aria-hidden
+              />
+              {progress > 0 && (
+                <div className="w-full">
+                  <div className="h-2 w-full rounded-full bg-slate-200 overflow-hidden">
+                    <div
+                      className="h-2 bg-brand-600 transition-all"
+                      style={{ width: `${progress}%` }}
+                    />
+                  </div>
+                  <div className="mt-1 text-xs text-slate-500">
+                    {progressLabel} {progress}%
+                  </div>
+                </div>
+              )}
+              {fileMeta && (
+                <div className="rounded-md border border-slate-200 p-4 bg-white shadow-sm">
+                  <div className="flex items-center justify-between mb-2">
+                    <div className="text-sm font-medium">{fileMeta.name}</div>
+                    <div className="text-xs text-slate-500">
+                      {Math.round(fileMeta.size / 1024)} KB
+                    </div>
+                  </div>
+                  {loadedFromCache && (
+                    <div className="mb-2 text-[11px] text-brand-700">
+                      Loaded from browser cache
+                    </div>
+                  )}
+                  <div className="mb-3 text-xs text-slate-500">
+                    {fileMeta.type || "Unknown type"}
+                  </div>
+                  {/* Table preview when structured data detected; otherwise show text */}
+                  {tablePreview && tablePreview.origin === "csv" ? (
+                    <div className="max-h-64 w-full min-w-0 overflow-x-auto overflow-y-auto rounded-md bg-slate-50">
+                      <table className="min-w-full text-xs">
+                        <thead className="sticky top-0 bg-slate-100">
+                          <tr>
+                            {tablePreview.headers.map((h, idx) => (
+                              <th
+                                key={idx}
+                                className="text-left font-semibold px-3 py-2 border-b border-slate-200 whitespace-nowrap"
+                              >
+                                {h}
+                              </th>
+                            ))}
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {tablePreview.rows.map((r, i) => (
+                            <tr
+                              key={i}
+                              className={i % 2 === 0 ? "" : "bg-slate-100/50"}
+                            >
+                              {r.map((c, j) => (
+                                <td
+                                  key={j}
+                                  className="px-3 py-1.5 border-b border-slate-100 whitespace-nowrap max-w-[24ch] overflow-hidden text-ellipsis"
+                                >
+                                  {c}
+                                </td>
+                              ))}
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  ) : (
+                    <pre className="max-h-64 overflow-auto text-xs bg-slate-50 p-3 rounded-md whitespace-pre-wrap leading-relaxed">
+                      {fileMeta.contentPreview || "(no preview)"}
+                    </pre>
+                  )}
 
-													// Fallback for unmapped PII types
-													const riskInfo = riskExplanations[pii.type] || riskExplanations[pii.type.toUpperCase()] || { 
-														why: 'This data type contains personal information that could identify individuals or reveal sensitive patterns according to GDPR Article 4(1).',
-														impact: 'POTENTIAL RISK: May violate privacy regulations if not properly protected. Could enable tracking, profiling, or discrimination.',
-														gdprArticles: [
-															'Article 4(1) - Definition of Personal Data',
-															'Article 5 - Principles: Lawfulness, Fairness, Transparency',
-															'Article 6 - Lawful Basis Required for Processing',
-															'Article 24 - Responsibility of the Controller',
-															'Article 25 - Data Protection by Design and Default'
-														],
-														actions: ['Review necessity of this data field', 'Apply appropriate anonymization techniques', 'Implement access controls and audit logging', 'Document lawful basis for processing', 'Conduct Privacy Impact Assessment']
-													};
+                  {error && (
+                    <div className="mt-3 p-3 bg-red-50 border border-red-200 rounded-md text-sm text-red-700">
+                      ❌ {error}
+                    </div>
+                  )}
 
-													return (
-														<div key={idx} className={`group relative overflow-hidden rounded-xl border-2 p-6 transition-all hover:shadow-xl ${
-															pii.severity === 'CRITICAL' ? 'bg-gradient-to-br from-red-50 via-white to-red-100 border-red-400' :
-															pii.severity === 'HIGH' ? 'bg-gradient-to-br from-orange-50 via-white to-orange-100 border-orange-400' :
-															pii.severity === 'MEDIUM' ? 'bg-gradient-to-br from-yellow-50 via-white to-yellow-100 border-yellow-400' :
-															'bg-gradient-to-br from-blue-50 via-white to-blue-100 border-blue-400'
-														}`}>
-															<div className="absolute top-0 right-0 w-40 h-40 bg-white/30 rounded-full blur-3xl"></div>
-															
-															<div className="relative">
-																{/* Feature Header */}
-																<div className="flex items-start justify-between mb-4">
-																	<div className="flex-1">
-																		<div className="flex items-center gap-3 mb-2">
-																			<span className="text-3xl">
-																				{pii.severity === 'CRITICAL' ? '🔴' : 
-																				 pii.severity === 'HIGH' ? '🟠' : 
-																				 pii.severity === 'MEDIUM' ? '🟡' : '🔵'}
-																			</span>
-																			<div>
-																				<div className="font-mono text-xl font-black text-slate-800">
-																					{pii.column}
-																				</div>
-																				<div className="text-sm text-slate-600 mt-1">
-																					<span className="font-semibold">PII Type:</span> {pii.type.replace(/_/g, ' ')}
-																					{pii.occurrences && (
-																						<>
-																							<span className="mx-2">•</span>
-																							<span className="font-semibold">Found in:</span> {pii.occurrences} rows
-																						</>
-																					)}
-																					{pii.confidence && (
-																						<>
-																							<span className="mx-2">•</span>
-																							<span className="font-semibold">Confidence:</span> {(pii.confidence * 100).toFixed(0)}%
-																						</>
-																					)}
-																				</div>
-																			</div>
-																		</div>
-																	</div>
-																	<span className={`px-4 py-2 rounded-full text-xs font-black shadow-lg ${
-																		pii.severity === 'CRITICAL' ? 'bg-red-600 text-white' :
-																		pii.severity === 'HIGH' ? 'bg-orange-600 text-white' :
-																		pii.severity === 'MEDIUM' ? 'bg-yellow-600 text-white' :
-																		'bg-blue-600 text-white'
-																	}`}>
-																		{pii.severity} RISK
-																	</span>
-																</div>
+                  {piiDetectionResult && (
+                    <div className="mt-3 p-3 bg-blue-50 border border-blue-200 rounded-md text-sm text-blue-700">
+                      🔍 PII Detection complete! Found{" "}
+                      {piiDetectionResult.summary.risky_columns_found} risky
+                      columns in {piiDetectionResult.file_type.toUpperCase()}{" "}
+                      file.
+                      <div className="mt-1 text-xs">
+                        <span className="font-semibold text-red-700">
+                          {piiDetectionResult.summary.high_risk_count} HIGH
+                        </span>{" "}
+                        •
+                        <span className="font-semibold text-orange-600 ml-1">
+                          {piiDetectionResult.summary.medium_risk_count} MEDIUM
+                        </span>{" "}
+                        •
+                        <span className="font-semibold text-yellow-600 ml-1">
+                          {piiDetectionResult.summary.low_risk_count} LOW
+                        </span>
+                      </div>
+                      <p className="mt-2 text-xs">
+                        Review detected risks in the "Bias & Risk Mitigation"
+                        tab to choose anonymization strategies.
+                      </p>
+                    </div>
+                  )}
 
-																{/* Why is this risky? */}
-																<div className="mb-4 p-4 bg-white rounded-lg border-2 border-slate-200">
-																	<div className="flex items-start gap-2 mb-2">
-																		<span className="text-xl">❓</span>
-																		<div className="flex-1">
-																			<div className="text-sm font-black text-slate-700 mb-2">WHY IS THIS FEATURE RISKY?</div>
-																			<p className="text-sm text-slate-700 leading-relaxed">{riskInfo.why}</p>
-																		</div>
-																	</div>
-																</div>
+                  {analyzeResult && (
+                    <div className="mt-3 p-3 bg-green-50 border border-green-200 rounded-md text-sm text-green-700">
+                      ✅ Analysis complete! View results in tabs.
+                      <a
+                        href={getReportUrl(analyzeResult.report_file)}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="ml-2 underline"
+                      >
+                        Download Report
+                      </a>
+                    </div>
+                  )}
 
-																{/* Impact */}
-																<div className="mb-4 p-4 bg-gradient-to-r from-red-50 to-orange-50 rounded-lg border-2 border-red-200">
-																	<div className="flex items-start gap-2 mb-2">
-																		<span className="text-xl">⚠️</span>
-																		<div className="flex-1">
-																			<div className="text-sm font-black text-red-800 mb-2">POTENTIAL IMPACT IF EXPOSED</div>
-																			<p className="text-sm text-slate-800 leading-relaxed font-semibold">{riskInfo.impact}</p>
-																		</div>
-																	</div>
-																</div>
+                  {cleanResult && (
+                    <div className="mt-3 p-3 bg-green-50 border border-green-200 rounded-md text-sm text-green-700">
+                      ✅ Cleaning complete!{" "}
+                      {cleanResult.summary.total_cells_affected} cells
+                      anonymized.
+                      <div className="mt-2 flex gap-2">
+                        <a
+                          href={getReportUrl(cleanResult.files.cleaned_csv)}
+                          download
+                          className="underline"
+                        >
+                          Download Cleaned CSV
+                        </a>
+                        <a
+                          href={getReportUrl(cleanResult.files.audit_report)}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="underline"
+                        >
+                          View Audit Report
+                        </a>
+                      </div>
+                    </div>
+                  )}
 
-																{/* GDPR Articles Violated */}
-																<div className="mb-4 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border-2 border-blue-200">
-																	<div className="flex items-start gap-2 mb-2">
-																		<span className="text-xl">⚖️</span>
-																		<div className="flex-1">
-																			<div className="text-sm font-black text-blue-800 mb-2">GDPR ARTICLES VIOLATED / APPLICABLE</div>
-																			<div className="space-y-1">
-																				{riskInfo.gdprArticles.map((article, i) => (
-																					<div key={i} className="flex items-start gap-2">
-																						<span className="text-blue-600 mt-1">•</span>
-																						<span className="text-sm text-slate-800 font-semibold">{article}</span>
-																					</div>
-																				))}
-																			</div>
-																		</div>
-																	</div>
-																</div>
+                  <div className="mt-3 flex justify-end gap-2">
+                    <button
+                      type="button"
+                      onClick={async () => {
+                        reset();
+                        try {
+                          await deleteLatestUpload();
+                        } catch {}
+                        setLoadedFromCache(false);
+                        setAnalyzeResult(null);
+                        setCleanResult(null);
+                        setPIIDetectionResult(null);
+                      }}
+                      className="text-xs rounded-md border px-3 py-1.5 hover:bg-slate-50"
+                    >
+                      Clear
+                    </button>
+                    <button
+                      type="button"
+                      onClick={handleDetectPII}
+                      disabled={isProcessing}
+                      className="text-xs rounded-md bg-blue-600 text-white px-3 py-1.5 hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      {isProcessing ? "Processing..." : "🔍 Detect PII"}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={handleAnalyze}
+                      disabled={isProcessing}
+                      className="text-xs rounded-md bg-brand-600 text-white px-3 py-1.5 hover:bg-brand-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      {isProcessing ? "Processing..." : "⚡ Analyze"}
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        );
+      case "bias-analysis":
+        return (
+          <div className="space-y-6">
+            <div>
+              <h2 className="text-2xl font-bold mb-2">
+                Bias & Fairness Analysis
+              </h2>
+              <p className="text-sm text-slate-600">
+                Comprehensive evaluation of algorithmic fairness across
+                demographic groups
+              </p>
+            </div>
 
-																{/* Recommended Actions */}
-																<div className="p-4 bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg border-2 border-green-300">
-																	<div className="flex items-start gap-2 mb-3">
-																		<span className="text-xl">✅</span>
-																		<div className="flex-1">
-																			<div className="text-sm font-black text-green-800 mb-2">RECOMMENDED ACTIONS TO REDUCE RISK</div>
-																			<ul className="space-y-2">
-																				{riskInfo.actions.map((action, i) => (
-																					<li key={i} className="flex items-start gap-2">
-																						<span className="text-green-600 font-bold mt-0.5">{i + 1}.</span>
-																						<span className="text-sm text-slate-800 font-medium">{action}</span>
-																					</li>
-																				))}
-																			</ul>
-																		</div>
-																	</div>
-																</div>
-															</div>
-														</div>
-													);
-												})}
-											</div>
-										</div>
-									) : (
-										<div className="text-sm text-slate-600 bg-green-50 border border-green-200 rounded-lg p-4 flex items-center gap-3">
-											<span className="text-2xl">✓</span>
-											<div>
-												<div className="font-semibold text-green-800">No PII Detected</div>
-												<div className="text-xs text-slate-600 mt-1">Dataset appears to be free of personally identifiable information</div>
-											</div>
-										</div>
-									)}
-								</div>
-							)}								{/* Violations Section with Enhanced Design */}
-								{analyzeResult.risk_assessment.violations && 
-								 analyzeResult.risk_assessment.violations.length > 0 && (
-									<div className="bg-gradient-to-br from-red-50 via-white to-orange-50 rounded-xl border-2 border-red-200 p-6 shadow-lg">
-										<div className="flex items-center gap-3 mb-5">
-											<span className="text-3xl">⚠️</span>
-											<h3 className="text-xl font-bold text-slate-800">Violations</h3>
-											<span className="ml-auto px-4 py-1.5 bg-red-600 text-white rounded-full text-sm font-black shadow-md">
-												{analyzeResult.risk_assessment.violations.length} Issues Found
-											</span>
-										</div>
+            {analyzeResult ? (
+              <div className="space-y-6">
+                {/* Overall Bias Score Card */}
+                <div className="p-6 bg-gradient-to-br from-purple-50 to-indigo-50 rounded-xl border-2 border-purple-200">
+                  <div className="flex items-start justify-between">
+                    <div>
+                      <div className="text-sm font-medium text-purple-700 mb-1">
+                        Overall Bias Score
+                      </div>
+                      <div className="text-5xl font-bold text-purple-900">
+                        {(
+                          analyzeResult.bias_metrics.overall_bias_score * 100
+                        ).toFixed(1)}
+                        %
+                      </div>
+                      <div className="mt-3 flex items-center gap-2">
+                        {analyzeResult.bias_metrics.overall_bias_score < 0.3 ? (
+                          <>
+                            <span className="px-3 py-1 bg-green-100 text-green-800 text-xs font-semibold rounded-full">
+                              ✓ Low Bias
+                            </span>
+                            <span className="text-sm text-slate-600">
+                              Excellent fairness
+                            </span>
+                          </>
+                        ) : analyzeResult.bias_metrics.overall_bias_score <
+                          0.5 ? (
+                          <>
+                            <span className="px-3 py-1 bg-yellow-100 text-yellow-800 text-xs font-semibold rounded-full">
+                              ⚠ Moderate Bias
+                            </span>
+                            <span className="text-sm text-slate-600">
+                              Monitor recommended
+                            </span>
+                          </>
+                        ) : (
+                          <>
+                            <span className="px-3 py-1 bg-red-100 text-red-800 text-xs font-semibold rounded-full">
+                              ✗ High Bias
+                            </span>
+                            <span className="text-sm text-slate-600">
+                              Action required
+                            </span>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <div className="text-sm text-slate-600 mb-1">
+                        Violations
+                      </div>
+                      <div
+                        className={`text-3xl font-bold ${analyzeResult.bias_metrics.violations_detected.length > 0 ? "text-red-600" : "text-green-600"}`}
+                      >
+                        {analyzeResult.bias_metrics.violations_detected.length}
+                      </div>
+                    </div>
+                  </div>
 
-										<div className="space-y-3">
-											{analyzeResult.risk_assessment.violations.map((violation: any, idx: number) => (
-												<div key={idx} className={`group relative overflow-hidden p-5 rounded-xl border-2 transition-all hover:shadow-lg hover:scale-[1.02] ${
-													violation.severity === 'CRITICAL' ? 'bg-gradient-to-r from-red-50 to-red-100 border-red-300' :
-													violation.severity === 'HIGH' ? 'bg-gradient-to-r from-orange-50 to-orange-100 border-orange-300' :
-													violation.severity === 'MEDIUM' ? 'bg-gradient-to-r from-yellow-50 to-yellow-100 border-yellow-300' :
-													'bg-gradient-to-r from-blue-50 to-blue-100 border-blue-300'
-												}`}>
-													<div className="absolute top-0 right-0 w-32 h-32 bg-white/20 rounded-full blur-3xl"></div>
-													
-													<div className="relative">
-														<div className="flex items-start justify-between gap-3 mb-3">
-															<div className="flex items-center gap-2">
-																<span className={`text-xs font-black px-3 py-1.5 rounded-full shadow-sm ${
-																	violation.severity === 'CRITICAL' ? 'bg-red-600 text-white' :
-																	violation.severity === 'HIGH' ? 'bg-orange-600 text-white' :
-																	violation.severity === 'MEDIUM' ? 'bg-yellow-600 text-slate-900' :
-																	'bg-blue-600 text-white'
-																}`}>
-																	{violation.severity}
-																</span>
-																<span className="text-xs font-bold text-slate-500 uppercase tracking-wider">
-																	{violation.category}
-																</span>
-															</div>
-														</div>
-														
-														<div className="flex items-start gap-3">
-															<span className="text-2xl mt-1">
-																{violation.severity === 'CRITICAL' ? '🔴' : 
-																 violation.severity === 'HIGH' ? '🟠' : 
-																 violation.severity === 'MEDIUM' ? '🟡' : '🔵'}
-															</span>
-															<div className="flex-1">
-																<div className="text-base font-bold text-slate-800 mb-1">
-																	{violation.message}
-																</div>
-																{violation.details && (
-																	<div className="text-sm text-slate-600 leading-relaxed">
-																		{violation.details}
-																	</div>
-																)}
-															</div>
-														</div>
-													</div>
-												</div>
-											))}
-										</div>
-									</div>
-								)}
+                  {/* Interpretation */}
+                  <div className="mt-4 p-4 bg-white/70 rounded-lg">
+                    <div className="text-xs font-semibold text-purple-800 mb-1">
+                      INTERPRETATION
+                    </div>
+                    <p className="text-sm text-slate-700">
+                      {analyzeResult.bias_metrics.overall_bias_score < 0.3
+                        ? "Your model demonstrates strong fairness across demographic groups. Continue monitoring to ensure consistent performance."
+                        : analyzeResult.bias_metrics.overall_bias_score < 0.5
+                          ? "Moderate bias detected. Review fairness metrics below and consider implementing mitigation strategies to reduce disparities."
+                          : "Significant bias detected. Immediate action required to address fairness concerns before deployment. Review all violation details below."}
+                    </p>
+                  </div>
+                </div>
 
-								{/* Key Insights Section with Enhanced Design */}
-								{analyzeResult.risk_assessment.insights && 
-								 analyzeResult.risk_assessment.insights.length > 0 && (
-									<div className="relative overflow-hidden bg-gradient-to-br from-blue-600 via-indigo-600 to-purple-600 rounded-xl border-2 border-blue-700 p-8 shadow-2xl">
-										<div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full blur-3xl"></div>
-										<div className="absolute bottom-0 left-0 w-48 h-48 bg-purple-500/10 rounded-full blur-3xl"></div>
-										
-										<div className="relative">
-											<div className="flex items-center gap-3 mb-6">
-												<span className="text-4xl">💡</span>
-												<h3 className="text-2xl font-black text-white">Key Insights</h3>
-											</div>
+                {/* Model Performance Metrics */}
+                <div className="p-6 bg-white rounded-xl border border-slate-200 shadow-sm">
+                  <h3 className="font-bold text-lg mb-4 flex items-center gap-2">
+                    <span className="text-blue-600">📊</span>
+                    Model Performance Metrics
+                  </h3>
+                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                    <div className="p-4 bg-blue-50 rounded-lg">
+                      <div className="text-xs text-blue-700 font-semibold mb-1">
+                        ACCURACY
+                      </div>
+                      <div className="text-2xl font-bold text-blue-900">
+                        {(
+                          analyzeResult.model_performance.accuracy * 100
+                        ).toFixed(1)}
+                        %
+                      </div>
+                      <div className="text-xs text-slate-600 mt-1">
+                        Overall correctness
+                      </div>
+                    </div>
+                    <div className="p-4 bg-green-50 rounded-lg">
+                      <div className="text-xs text-green-700 font-semibold mb-1">
+                        PRECISION
+                      </div>
+                      <div className="text-2xl font-bold text-green-900">
+                        {(
+                          analyzeResult.model_performance.precision * 100
+                        ).toFixed(1)}
+                        %
+                      </div>
+                      <div className="text-xs text-slate-600 mt-1">
+                        Positive prediction accuracy
+                      </div>
+                    </div>
+                    <div className="p-4 bg-purple-50 rounded-lg">
+                      <div className="text-xs text-purple-700 font-semibold mb-1">
+                        RECALL
+                      </div>
+                      <div className="text-2xl font-bold text-purple-900">
+                        {(analyzeResult.model_performance.recall * 100).toFixed(
+                          1,
+                        )}
+                        %
+                      </div>
+                      <div className="text-xs text-slate-600 mt-1">
+                        True positive detection rate
+                      </div>
+                    </div>
+                    <div className="p-4 bg-orange-50 rounded-lg">
+                      <div className="text-xs text-orange-700 font-semibold mb-1">
+                        F1 SCORE
+                      </div>
+                      <div className="text-2xl font-bold text-orange-900">
+                        {(
+                          analyzeResult.model_performance.f1_score * 100
+                        ).toFixed(1)}
+                        %
+                      </div>
+                      <div className="text-xs text-slate-600 mt-1">
+                        Balanced metric
+                      </div>
+                    </div>
+                  </div>
+                </div>
 
-											<div className="space-y-3">
-												{analyzeResult.risk_assessment.insights.map((insight: string, idx: number) => (
-													<div key={idx} className="flex items-start gap-3 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg p-4 hover:bg-white/15 transition-all">
-														<span className="text-yellow-300 text-xl mt-0.5 flex-shrink-0">•</span>
-														<span className="text-white text-sm leading-relaxed font-medium">{insight}</span>
-													</div>
-												))}
-											</div>
-										</div>
-									</div>
-								)}
+                {/* Fairness Metrics */}
+                {Object.keys(analyzeResult.bias_metrics.disparate_impact)
+                  .length > 0 && (
+                  <div className="p-6 bg-white rounded-xl border border-slate-200 shadow-sm">
+                    <h3 className="font-bold text-lg mb-4 flex items-center gap-2">
+                      <span className="text-purple-600">⚖️</span>
+                      Fairness Metrics by Protected Attribute
+                    </h3>
 
-								{/* Compliance Status - Enhanced with GDPR Article Details */}
-								{analyzeResult.risk_assessment.compliance_risks && (
-									<div className="bg-white rounded-xl border-2 border-slate-200 p-6 shadow-lg">
-										<div className="flex items-center gap-2 mb-6">
-											<span className="text-2xl">📋</span>
-											<h3 className="text-lg font-bold text-slate-800">Regulatory Compliance Status</h3>
-										</div>
+                    {Object.entries(
+                      analyzeResult.bias_metrics.disparate_impact,
+                    ).map(([attr, metrics]: [string, any]) => (
+                      <div
+                        key={attr}
+                        className="mb-6 last:mb-0 p-4 bg-slate-50 rounded-lg"
+                      >
+                        <div className="font-semibold text-slate-800 mb-3 flex items-center gap-2">
+                          <span className="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded">
+                            {attr.toUpperCase()}
+                          </span>
+                        </div>
 
-										<div className="space-y-4">
-											{Object.entries(analyzeResult.risk_assessment.compliance_risks)
-												.filter(([key]) => ['gdpr', 'ccpa', 'hipaa', 'ecoa'].includes(key))
-												.map(([regulation, data]: [string, any]) => {
-													if (!data || typeof data !== 'object') return null;
-													
-													const regulationInfo: Record<string, { name: string; description: string; keyArticles: string[] }> = {
-														gdpr: {
-															name: 'GDPR (General Data Protection Regulation)',
-															description: 'EU regulation protecting personal data and privacy',
-															keyArticles: [
-																'Article 5 - Principles (lawfulness, fairness, transparency, purpose limitation, data minimization)',
-																'Article 6 - Lawful basis for processing',
-																'Article 7 - Conditions for consent',
-																'Article 9 - Processing special categories of personal data',
-																'Article 15-22 - Data subject rights (access, rectification, erasure, portability)',
-																'Article 25 - Data protection by design and by default',
-																'Article 32 - Security of processing',
-																'Article 35 - Data protection impact assessment'
-															]
-														},
-														ccpa: {
-															name: 'CCPA (California Consumer Privacy Act)',
-															description: 'California law providing privacy rights to consumers',
-															keyArticles: [
-																'Right to Know what personal information is collected',
-																'Right to Delete personal information',
-																'Right to Opt-Out of sale of personal information',
-																'Right to Non-Discrimination for exercising CCPA rights',
-																'Notice at Collection requirements'
-															]
-														},
-														hipaa: {
-															name: 'HIPAA (Health Insurance Portability and Accountability Act)',
-															description: 'US regulation protecting health information',
-															keyArticles: [
-																'Privacy Rule - Protected Health Information (PHI) safeguards',
-																'Security Rule - Administrative, physical, technical safeguards',
-																'Breach Notification Rule - Incident reporting requirements',
-																'Minimum Necessary Standard - Access limitation'
-															]
-														},
-														ecoa: {
-															name: 'ECOA (Equal Credit Opportunity Act)',
-															description: 'US law prohibiting discrimination in credit decisions',
-															keyArticles: [
-																'Prohibition of discrimination based on protected characteristics',
-																'Adverse action notice requirements',
-																'Record retention requirements',
-																'Monitoring and reporting obligations'
-															]
-														}
-													};
+                        {/* Disparate Impact */}
+                        {metrics?.disparate_impact?.value !== undefined && (
+                          <div className="mb-3 p-3 bg-white rounded border border-slate-200">
+                            <div className="flex items-center justify-between mb-2">
+                              <div>
+                                <div className="text-xs font-semibold text-slate-600">
+                                  DISPARATE IMPACT RATIO
+                                </div>
+                                <div className="text-2xl font-bold text-slate-900">
+                                  {metrics.disparate_impact.value.toFixed(3)}
+                                </div>
+                              </div>
+                              <div
+                                className={`px-3 py-1 rounded-full text-xs font-semibold ${
+                                  metrics.disparate_impact.fair
+                                    ? "bg-green-100 text-green-800"
+                                    : "bg-red-100 text-red-800"
+                                }`}
+                              >
+                                {metrics.disparate_impact.fair
+                                  ? "✓ FAIR"
+                                  : "✗ UNFAIR"}
+                              </div>
+                            </div>
+                            <div className="text-xs text-slate-600 mb-2">
+                              {metrics.disparate_impact.interpretation ||
+                                "Ratio of positive rates between groups"}
+                            </div>
+                            <div className="text-xs text-slate-500 bg-blue-50 p-2 rounded">
+                              <strong>Fair Range:</strong>{" "}
+                              {metrics.disparate_impact.threshold || 0.8} -{" "}
+                              {(
+                                1 / (metrics.disparate_impact.threshold || 0.8)
+                              ).toFixed(2)}
+                              {metrics.disparate_impact.fair
+                                ? " • This ratio indicates balanced treatment across groups."
+                                : " • Ratio outside fair range suggests one group receives significantly different outcomes."}
+                            </div>
+                          </div>
+                        )}
 
-													const info = regulationInfo[regulation] || { name: regulation.toUpperCase(), description: '', keyArticles: [] };
-													
-													return (
-														<div key={regulation} className={`rounded-xl border-2 overflow-hidden ${
-															data.status === 'COMPLIANT' ? 'border-green-300 bg-gradient-to-br from-green-50 to-emerald-50' :
-															data.status === 'PARTIAL' ? 'border-yellow-300 bg-gradient-to-br from-yellow-50 to-orange-50' :
-															data.status === 'NOT_APPLICABLE' ? 'border-slate-300 bg-gradient-to-br from-slate-50 to-slate-100' :
-															'border-red-300 bg-gradient-to-br from-red-50 to-rose-50'
-														}`}>
-															{/* Header */}
-															<div className={`p-4 border-b-2 ${
-																data.status === 'COMPLIANT' ? 'bg-green-100 border-green-200' :
-																data.status === 'PARTIAL' ? 'bg-yellow-100 border-yellow-200' :
-																data.status === 'NOT_APPLICABLE' ? 'bg-slate-100 border-slate-200' :
-																'bg-red-100 border-red-200'
-															}`}>
-																<div className="flex items-center justify-between">
-																	<div>
-																		<div className="text-sm font-black text-slate-800 uppercase tracking-wide">
-																			{info.name}
-																		</div>
-																		{info.description && (
-																			<div className="text-xs text-slate-600 mt-1">{info.description}</div>
-																		)}
-																	</div>
-																	<span className={`px-4 py-2 rounded-full text-xs font-black shadow-sm ${
-																		data.status === 'COMPLIANT' ? 'bg-green-600 text-white' :
-																		data.status === 'PARTIAL' ? 'bg-yellow-600 text-white' :
-																		data.status === 'NOT_APPLICABLE' ? 'bg-slate-600 text-white' :
-																		'bg-red-600 text-white'
-																	}`}>
-																		{data.status === 'NOT_APPLICABLE' ? 'N/A' : data.status}
-																	</span>
-																</div>
-															</div>
+                        {/* Statistical Parity */}
+                        {metrics?.statistical_parity_difference?.value !==
+                          undefined && (
+                          <div className="mb-3 p-3 bg-white rounded border border-slate-200">
+                            <div className="flex items-center justify-between mb-2">
+                              <div>
+                                <div className="text-xs font-semibold text-slate-600">
+                                  STATISTICAL PARITY DIFFERENCE
+                                </div>
+                                <div className="text-2xl font-bold text-slate-900">
+                                  {metrics.statistical_parity_difference.value.toFixed(
+                                    3,
+                                  )}
+                                </div>
+                              </div>
+                              <div
+                                className={`px-3 py-1 rounded-full text-xs font-semibold ${
+                                  metrics.statistical_parity_difference.fair
+                                    ? "bg-green-100 text-green-800"
+                                    : "bg-red-100 text-red-800"
+                                }`}
+                              >
+                                {metrics.statistical_parity_difference.fair
+                                  ? "✓ FAIR"
+                                  : "✗ UNFAIR"}
+                              </div>
+                            </div>
+                            <div className="text-xs text-slate-600 mb-2">
+                              {metrics.statistical_parity_difference
+                                .interpretation ||
+                                "Difference in positive rates"}
+                            </div>
+                            <div className="text-xs text-slate-500 bg-blue-50 p-2 rounded">
+                              <strong>Fair Threshold:</strong> ±
+                              {metrics.statistical_parity_difference
+                                .threshold || 0.1}
+                              {metrics.statistical_parity_difference.fair
+                                ? " • Difference within acceptable range for equal treatment."
+                                : " • Significant difference in positive outcome rates between groups."}
+                            </div>
+                          </div>
+                        )}
 
-															{/* Content */}
-															<div className="p-4">
-																{data.applicable === false ? (
-																	<div className="text-sm text-slate-600 italic">
-																		This regulation does not appear to apply to your dataset based on detected data types.
-																	</div>
-																) : (
-																	<div className="space-y-3">
-																		{/* Score */}
-																		{data.score !== undefined && (
-																			<div className="flex items-center gap-3">
-																				<div className="text-xs font-semibold text-slate-600">Compliance Score:</div>
-																				<div className="flex-1 h-3 bg-slate-200 rounded-full overflow-hidden">
-																					<div 
-																						className={`h-full transition-all ${
-																							data.score > 0.7 ? 'bg-green-500' :
-																							data.score > 0.4 ? 'bg-yellow-500' :
-																							'bg-red-500'
-																						}`}
-																						style={{ width: `${data.score * 100}%` }}
-																					></div>
-																				</div>
-																				<div className="text-sm font-bold text-slate-800">
-																					{(data.score * 100).toFixed(0)}%
-																				</div>
-																			</div>
-																		)}
+                        {/* Group Metrics */}
+                        {metrics.group_metrics && (
+                          <div className="p-3 bg-white rounded border border-slate-200">
+                            <div className="text-xs font-semibold text-slate-600 mb-2">
+                              GROUP PERFORMANCE
+                            </div>
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                              {Object.entries(metrics.group_metrics).map(
+                                ([group, groupMetrics]: [string, any]) => (
+                                  <div
+                                    key={group}
+                                    className="p-2 bg-slate-50 rounded"
+                                  >
+                                    <div className="font-medium text-sm text-slate-800">
+                                      {group}
+                                    </div>
+                                    <div className="text-xs text-slate-600 mt-1">
+                                      <div>
+                                        Positive Rate:{" "}
+                                        <strong>
+                                          {groupMetrics.positive_rate !==
+                                          undefined
+                                            ? (
+                                                groupMetrics.positive_rate * 100
+                                              ).toFixed(1)
+                                            : "N/A"}
+                                          %
+                                        </strong>
+                                      </div>
+                                      <div>
+                                        Sample Size:{" "}
+                                        <strong>
+                                          {groupMetrics.sample_size ?? "N/A"}
+                                        </strong>
+                                      </div>
+                                      {groupMetrics.tpr !== undefined && (
+                                        <div>
+                                          True Positive Rate:{" "}
+                                          <strong>
+                                            {(groupMetrics.tpr * 100).toFixed(
+                                              1,
+                                            )}
+                                            %
+                                          </strong>
+                                        </div>
+                                      )}
+                                    </div>
+                                  </div>
+                                ),
+                              )}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
 
-																		{/* Compliant Checks */}
-																		{data.compliant_checks && data.compliant_checks.length > 0 && (
-																			<div>
-																				<div className="text-xs font-semibold text-green-700 mb-2">✓ Compliant Areas:</div>
-																				<div className="flex flex-wrap gap-2">
-																					{data.compliant_checks.map((check: string, idx: number) => (
-																						<span key={idx} className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded border border-green-200">
-																							{check.replace(/_/g, ' ')}
-																						</span>
-																					))}
-																				</div>
-																			</div>
-																		)}
+                {/* Violations */}
+                {analyzeResult.bias_metrics.violations_detected.length > 0 && (
+                  <div className="p-6 bg-red-50 rounded-xl border-2 border-red-200">
+                    <h3 className="font-bold text-lg mb-4 flex items-center gap-2 text-red-800">
+                      <span>⚠️</span>
+                      Fairness Violations Detected
+                    </h3>
+                    <div className="space-y-4">
+                      {analyzeResult.bias_metrics.violations_detected.map(
+                        (violation: any, i: number) => {
+                          // Map bias violations to relevant GDPR articles
+                          const gdprArticles = [
+                            {
+                              article:
+                                "Article 5(1)(a) - Lawfulness, Fairness, and Transparency",
+                              explanation:
+                                "Personal data must be processed fairly. Algorithmic bias violates the fairness principle.",
+                            },
+                            {
+                              article: "Article 22 - Automated Decision-Making",
+                              explanation:
+                                "Individuals have the right not to be subject to decisions based solely on automated processing that produce legal or similarly significant effects, especially if discriminatory.",
+                            },
+                            {
+                              article:
+                                "Recital 71 - Safeguards Against Discrimination",
+                              explanation:
+                                "Automated decision-making should not be based on special categories of data and should include safeguards to prevent discriminatory effects.",
+                            },
+                          ];
 
-																		{/* Non-Compliant Checks */}
-																		{data.non_compliant_checks && data.non_compliant_checks.length > 0 && (
-																			<div>
-																				<div className="text-xs font-semibold text-red-700 mb-2">⚠️ Non-Compliant Areas:</div>
-																				<div className="flex flex-wrap gap-2">
-																					{data.non_compliant_checks.map((check: string, idx: number) => (
-																						<span key={idx} className="px-2 py-1 bg-red-100 text-red-800 text-xs rounded border border-red-200">
-																							{check.replace(/_/g, ' ')}
-																						</span>
-																					))}
-																				</div>
-																			</div>
-																		)}
+                          // Add ECOA if dealing with credit/lending
+                          const isCredit =
+                            violation.attribute &&
+                            (violation.attribute
+                              .toLowerCase()
+                              .includes("credit") ||
+                              violation.attribute
+                                .toLowerCase()
+                                .includes("loan") ||
+                              violation.attribute
+                                .toLowerCase()
+                                .includes("income"));
 
-																		{/* Key Articles/Requirements */}
-																		{info.keyArticles.length > 0 && (
-																			<details className="mt-3">
-																				<summary className="text-xs font-semibold text-blue-700 cursor-pointer hover:text-blue-900">
-																					📖 View Key Requirements & Articles
-																				</summary>
-																				<div className="mt-2 pl-4 space-y-2">
-																					{info.keyArticles.map((article, idx) => (
-																						<div key={idx} className="flex items-start gap-2">
-																							<span className="text-blue-600 text-xs mt-0.5">•</span>
-																							<span className="text-xs text-slate-700">{article}</span>
-																						</div>
-																					))}
-																				</div>
-																			</details>
-																		)}
+                          return (
+                            <div
+                              key={i}
+                              className="p-5 bg-white rounded-xl border-2 border-red-300 shadow-sm hover:shadow-md transition-all"
+                            >
+                              {/* Violation Header */}
+                              <div className="flex items-start gap-3 mb-4">
+                                <span
+                                  className={`px-3 py-1 rounded-full text-xs font-black shadow-sm ${
+                                    violation.severity === "HIGH"
+                                      ? "bg-red-600 text-white"
+                                      : violation.severity === "MEDIUM"
+                                        ? "bg-orange-600 text-white"
+                                        : "bg-yellow-600 text-white"
+                                  }`}
+                                >
+                                  {violation.severity}
+                                </span>
+                                <div className="flex-1">
+                                  <div className="font-bold text-lg text-slate-900">
+                                    {violation.attribute}: {violation.metric}
+                                  </div>
+                                  <div className="text-sm text-slate-700 mt-1">
+                                    {violation.message}
+                                  </div>
+                                </div>
+                              </div>
 
-																		{/* Bias Score for ECOA */}
-																		{regulation === 'ecoa' && data.bias_score !== undefined && (
-																			<div className="mt-3 p-3 bg-white rounded border border-slate-200">
-																				<div className="text-xs font-semibold text-slate-600 mb-1">Bias Score (Discrimination Risk):</div>
-																				<div className="flex items-center gap-3">
-																					<div className="flex-1 h-3 bg-slate-200 rounded-full overflow-hidden">
-																						<div 
-																							className={`h-full transition-all ${
-																								data.bias_score < 0.3 ? 'bg-green-500' :
-																								data.bias_score < 0.5 ? 'bg-yellow-500' :
-																								'bg-red-500'
-																							}`}
-																							style={{ width: `${data.bias_score * 100}%` }}
-																						></div>
-																					</div>
-																					<div className={`text-sm font-bold ${
-																						data.bias_score < 0.3 ? 'text-green-600' :
-																						data.bias_score < 0.5 ? 'text-yellow-600' :
-																						'text-red-600'
-																					}`}>
-																						{(data.bias_score * 100).toFixed(1)}%
-																					</div>
-																				</div>
-																				<div className="text-xs text-slate-600 mt-1">
-																					{data.bias_score < 0.3 ? 'Low discrimination risk' :
-																					 data.bias_score < 0.5 ? 'Moderate discrimination risk - monitor closely' :
-																					 'High discrimination risk - immediate remediation required'}
-																				</div>
-																			</div>
-																		)}
-																	</div>
-																)}
-															</div>
-														</div>
-													);
-												})}
-										</div>
+                              {/* Violation Details */}
+                              {violation.details && (
+                                <div className="mb-4 p-3 bg-slate-50 rounded-lg border border-slate-200">
+                                  <div className="text-xs font-semibold text-slate-600 mb-1">
+                                    📊 TECHNICAL DETAILS
+                                  </div>
+                                  <div className="text-sm text-slate-700">
+                                    {violation.details}
+                                  </div>
+                                </div>
+                              )}
 
-										{/* Compliance Recommendations */}
-										{analyzeResult.risk_assessment.compliance_risks.recommendations && 
-										 analyzeResult.risk_assessment.compliance_risks.recommendations.length > 0 && (
-											<div className="mt-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
-												<div className="text-sm font-bold text-blue-900 mb-3">📌 Compliance Recommendations</div>
-												<div className="space-y-2">
-													{analyzeResult.risk_assessment.compliance_risks.recommendations.map((rec: any, idx: number) => (
-														<div key={idx} className="flex items-start gap-3 p-3 bg-white rounded border border-blue-200">
-															<span className={`px-2 py-0.5 text-xs font-bold rounded ${
-																rec.priority === 'CRITICAL' ? 'bg-red-600 text-white' :
-																rec.priority === 'HIGH' ? 'bg-orange-600 text-white' :
-																rec.priority === 'MEDIUM' ? 'bg-yellow-600 text-white' :
-																'bg-blue-600 text-white'
-															}`}>
-																{rec.priority}
-															</span>
-															<div className="flex-1">
-																<div className="text-sm font-semibold text-slate-800">{rec.recommendation}</div>
-																{rec.rationale && (
-																	<div className="text-xs text-slate-600 mt-1">{rec.rationale}</div>
-																)}
-															</div>
-														</div>
-													))}
-												</div>
-											</div>
-										)}
-									</div>
-								)}
-							</div>
-						) : (
-							<div className="text-center py-12 bg-slate-50 rounded-xl border-2 border-dashed border-slate-300">
-								<span className="text-4xl mb-3 block">🔒</span>
-								<p className="text-slate-600 mb-2">No risk analysis results yet</p>
-								<p className="text-sm text-slate-500">Upload a dataset and click "Analyze" to see comprehensive risk assessment</p>
-							</div>
-						)}
-					</div>
-				);
-			case "bias-risk-mitigation":
-				return (
-					<div className="space-y-6">
-						<div>
-							<h2 className="text-2xl font-bold mb-2">PII Detection & Anonymization Strategy</h2>
-							<p className="text-sm text-slate-600">Review detected risky features and choose how to anonymize them</p>
-						</div>
-						
-						{piiDetectionResult ? (
-							<div className="space-y-6">
-								{/* File Info Banner */}
-								<div className="p-3 bg-slate-100 border border-slate-300 rounded-lg text-sm">
-									<div className="flex items-center gap-3">
-										<span className="font-semibold text-slate-700">File:</span>
-										<code className="px-2 py-1 bg-white rounded border border-slate-200">{piiDetectionResult.filename}</code>
-										<span className="px-2 py-0.5 bg-blue-100 text-blue-800 text-xs font-semibold rounded">
-											{piiDetectionResult.file_type.toUpperCase()}
-										</span>
-										<span className="text-slate-600">
-											{piiDetectionResult.dataset_info.rows} rows × {piiDetectionResult.dataset_info.columns} columns
-										</span>
-									</div>
-								</div>
+                              {/* GDPR Articles Violated */}
+                              <div className="mb-4 p-4 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg border border-blue-200">
+                                <div className="text-xs font-bold text-blue-800 mb-3 flex items-center gap-2">
+                                  <span>⚖️</span>
+                                  GDPR ARTICLES VIOLATED
+                                </div>
+                                <div className="space-y-2">
+                                  {gdprArticles.map((gdpr, idx) => (
+                                    <div
+                                      key={idx}
+                                      className="p-2 bg-white/70 rounded border border-blue-200"
+                                    >
+                                      <div className="font-semibold text-xs text-blue-900">
+                                        {gdpr.article}
+                                      </div>
+                                      <div className="text-xs text-slate-700 mt-1">
+                                        {gdpr.explanation}
+                                      </div>
+                                    </div>
+                                  ))}
+                                  {isCredit && (
+                                    <div className="p-2 bg-white/70 rounded border border-orange-200">
+                                      <div className="font-semibold text-xs text-orange-900">
+                                        ECOA (Equal Credit Opportunity Act)
+                                      </div>
+                                      <div className="text-xs text-slate-700 mt-1">
+                                        Prohibits discrimination in credit
+                                        decisions based on protected
+                                        characteristics. This bias violation may
+                                        constitute illegal discrimination.
+                                      </div>
+                                    </div>
+                                  )}
+                                </div>
+                              </div>
 
-								{/* Summary Card */}
-								<div className="p-6 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl border-2 border-blue-200">
-									<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-										<div>
-											<div className="text-xs font-semibold text-blue-700 mb-1">TOTAL COLUMNS SCANNED</div>
-											<div className="text-3xl font-bold text-blue-900">{piiDetectionResult.summary.total_columns_scanned}</div>
-										</div>
-										<div>
-											<div className="text-xs font-semibold text-red-700 mb-1">HIGH RISK</div>
-											<div className="text-3xl font-bold text-red-900">{piiDetectionResult.summary.high_risk_count}</div>
-											<div className="text-xs text-slate-600">Must remove</div>
-										</div>
-										<div>
-											<div className="text-xs font-semibold text-orange-700 mb-1">MEDIUM RISK</div>
-											<div className="text-3xl font-bold text-orange-900">{piiDetectionResult.summary.medium_risk_count}</div>
-											<div className="text-xs text-slate-600">Hash recommended</div>
-										</div>
-										<div>
-											<div className="text-xs font-semibold text-yellow-700 mb-1">LOW RISK</div>
-											<div className="text-3xl font-bold text-yellow-900">{piiDetectionResult.summary.low_risk_count}</div>
-											<div className="text-xs text-slate-600">Mask/generalize</div>
-										</div>
-									</div>
-									<div className="mt-4 p-3 bg-white/70 rounded-lg text-sm text-slate-700">
-										{piiDetectionResult.message}
-									</div>
-								</div>
+                              {/* Recommendations */}
+                              <div className="p-3 bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg border border-green-200">
+                                <div className="text-xs font-semibold text-green-800 mb-2">
+                                  ✓ RECOMMENDED ACTIONS
+                                </div>
+                                <ul className="text-sm text-slate-700 space-y-1">
+                                  <li className="flex items-start gap-2">
+                                    <span className="text-green-600">•</span>
+                                    <span>
+                                      Investigate and remediate bias in the{" "}
+                                      {violation.attribute} attribute
+                                    </span>
+                                  </li>
+                                  <li className="flex items-start gap-2">
+                                    <span className="text-green-600">•</span>
+                                    <span>
+                                      Implement fairness constraints during
+                                      model training
+                                    </span>
+                                  </li>
+                                  <li className="flex items-start gap-2">
+                                    <span className="text-green-600">•</span>
+                                    <span>
+                                      Consider rebalancing dataset or applying
+                                      bias mitigation techniques
+                                    </span>
+                                  </li>
+                                  <li className="flex items-start gap-2">
+                                    <span className="text-green-600">•</span>
+                                    <span>
+                                      Document fairness assessment in GDPR
+                                      Article 35 DPIA (Data Protection Impact
+                                      Assessment)
+                                    </span>
+                                  </li>
+                                  {violation.severity === "HIGH" && (
+                                    <li className="flex items-start gap-2">
+                                      <span className="text-red-600">•</span>
+                                      <span className="text-red-700 font-semibold">
+                                        URGENT: This high-severity violation
+                                        requires immediate attention before
+                                        deployment
+                                      </span>
+                                    </li>
+                                  )}
+                                </ul>
+                              </div>
+                            </div>
+                          );
+                        },
+                      )}
+                    </div>
+                  </div>
+                )}
 
-								{/* Risky Features List */}
-								<div className="space-y-3">
-									{piiDetectionResult.risky_features.map((feature, idx) => {
-										const riskColor = 
-											feature.risk_level === 'HIGH' ? 'red' :
-											feature.risk_level === 'MEDIUM' ? 'orange' :
-											feature.risk_level === 'LOW' ? 'yellow' : 'gray';
-										
-										const bgColor = 
-											feature.risk_level === 'HIGH' ? 'bg-red-50 border-red-300' :
-											feature.risk_level === 'MEDIUM' ? 'bg-orange-50 border-orange-300' :
-											feature.risk_level === 'LOW' ? 'bg-yellow-50 border-yellow-300' : 'bg-gray-50 border-gray-300';
-										
-										return (
-											<div key={idx} className={`p-5 rounded-xl border-2 ${bgColor}`}>
-												{/* Header */}
-												<div className="flex items-start justify-between mb-3">
-													<div className="flex-1">
-														<div className="flex items-center gap-3 mb-2">
-															<span className={`px-3 py-1 bg-${riskColor}-600 text-white text-xs font-bold rounded-full`}>
-																{feature.risk_level} RISK
-															</span>
-															<span className="font-mono font-bold text-lg text-slate-800">{feature.column}</span>
-														</div>
-														<div className="text-sm text-slate-700">
-															<span className="font-semibold">Detected:</span> {feature.entity_type}
-															<span className="mx-2">•</span>
-															<span className="font-semibold">Confidence:</span> {(feature.confidence * 100).toFixed(1)}%
-															<span className="mx-2">•</span>
-															<span className="font-semibold">Occurrences:</span> {feature.detection_count}
-														</div>
-													</div>
-												</div>
+                {/* Key Insights */}
+                <div className="p-6 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl border border-blue-200">
+                  <h3 className="font-bold text-lg mb-3 flex items-center gap-2 text-blue-900">
+                    <span>💡</span>
+                    Key Insights
+                  </h3>
+                  <ul className="space-y-2 text-sm text-slate-700">
+                    <li className="flex items-start gap-2">
+                      <span className="text-blue-600 mt-0.5">•</span>
+                      <span>
+                        <strong>
+                          Bias Score{" "}
+                          {(
+                            analyzeResult.bias_metrics.overall_bias_score * 100
+                          ).toFixed(1)}
+                          %
+                        </strong>{" "}
+                        indicates
+                        {analyzeResult.bias_metrics.overall_bias_score < 0.3
+                          ? " strong fairness with minimal disparities across groups."
+                          : analyzeResult.bias_metrics.overall_bias_score < 0.5
+                            ? " moderate disparities that should be monitored and addressed."
+                            : " significant unfairness requiring immediate remediation before deployment."}
+                      </span>
+                    </li>
+                    <li className="flex items-start gap-2">
+                      <span className="text-blue-600 mt-0.5">•</span>
+                      <span>
+                        <strong>
+                          Model achieves{" "}
+                          {(
+                            analyzeResult.model_performance.accuracy * 100
+                          ).toFixed(1)}
+                          % accuracy
+                        </strong>
+                        , but fairness metrics reveal how performance varies
+                        across demographic groups.
+                      </span>
+                    </li>
+                    {analyzeResult.bias_metrics.violations_detected.length >
+                    0 ? (
+                      <li className="flex items-start gap-2">
+                        <span className="text-red-600 mt-0.5">•</span>
+                        <span className="text-red-700">
+                          <strong>
+                            {
+                              analyzeResult.bias_metrics.violations_detected
+                                .length
+                            }{" "}
+                            violation(s)
+                          </strong>{" "}
+                          detected. Review mitigation tab for recommended
+                          actions to improve fairness.
+                        </span>
+                      </li>
+                    ) : (
+                      <li className="flex items-start gap-2">
+                        <span className="text-green-600 mt-0.5">•</span>
+                        <span className="text-green-700">
+                          <strong>No violations detected.</strong> Model meets
+                          fairness thresholds across all protected attributes.
+                        </span>
+                      </li>
+                    )}
+                  </ul>
+                </div>
+              </div>
+            ) : (
+              <div className="text-center py-12">
+                <div className="text-6xl mb-4">📊</div>
+                <p className="text-slate-600 mb-2">No analysis results yet</p>
+                <p className="text-sm text-slate-500">
+                  Upload a dataset and click "Analyze" to see bias and fairness
+                  metrics
+                </p>
+              </div>
+            )}
+          </div>
+        );
+      case "risk-analysis":
+        return (
+          <div className="space-y-6">
+            {analyzeResult ? (
+              <div className="space-y-6">
+                {/* Header: RISK ANALYSIS SUMMARY */}
+                <div className="relative overflow-hidden rounded-xl border-2 border-slate-300 bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900 p-8 shadow-2xl">
+                  <div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-full blur-3xl"></div>
+                  <div className="relative">
+                    <div className="flex items-center gap-3 mb-6 pb-4 border-b border-slate-600">
+                      <span className="text-4xl">🔒</span>
+                      <h2 className="text-3xl font-black text-white tracking-tight">
+                        RISK ANALYSIS SUMMARY
+                      </h2>
+                    </div>
 
-												{/* Explanation */}
-												<div className="p-4 bg-white rounded-lg mb-4">
-													<div className="text-xs font-semibold text-slate-600 mb-2">WHY IS THIS RISKY?</div>
-													<p className="text-sm text-slate-700 leading-relaxed">{feature.explanation}</p>
-													<div className="mt-3 text-xs text-slate-600">
-														<strong>GDPR Reference:</strong> {feature.gdpr_article}
-													</div>
-												</div>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                      {/* Overall Risk */}
+                      <div className="bg-white/10 backdrop-blur-sm rounded-xl p-5 border border-white/20">
+                        <div className="text-sm font-medium text-slate-300 mb-2">
+                          📊 Overall Risk
+                        </div>
+                        <div className="text-5xl font-black text-white mb-2">
+                          {(
+                            analyzeResult.risk_assessment.overall_risk_score *
+                            100
+                          ).toFixed(1)}
+                          %
+                        </div>
+                        <div
+                          className={`inline-flex px-3 py-1 rounded-full text-xs font-bold ${
+                            analyzeResult.risk_assessment.risk_level ===
+                            "CRITICAL"
+                              ? "bg-red-500 text-white"
+                              : analyzeResult.risk_assessment.risk_level ===
+                                  "HIGH"
+                                ? "bg-orange-500 text-white"
+                                : analyzeResult.risk_assessment.risk_level ===
+                                    "MEDIUM"
+                                  ? "bg-yellow-500 text-slate-900"
+                                  : "bg-green-500 text-white"
+                          }`}
+                        >
+                          {analyzeResult.risk_assessment.risk_level}
+                        </div>
+                      </div>
 
-												{/* Sample Values */}
-												{feature.sample_values.length > 0 && (
-													<div className="p-4 bg-white rounded-lg mb-4">
-														<div className="text-xs font-semibold text-slate-600 mb-2">SAMPLE VALUES</div>
-														<div className="flex gap-2 flex-wrap">
-															{feature.sample_values.map((val, i) => (
-																<code key={i} className="px-2 py-1 bg-slate-100 rounded text-xs text-slate-800 border border-slate-200">
-																	{val}
-																</code>
-															))}
-														</div>
-													</div>
-												)}
+                      {/* Presidio Status */}
+                      <div className="bg-white/10 backdrop-blur-sm rounded-xl p-5 border border-white/20">
+                        <div className="text-sm font-medium text-slate-300 mb-2">
+                          🔒 Detection Engine
+                        </div>
+                        <div className="text-2xl font-bold text-white mb-2">
+                          {analyzeResult.risk_assessment.presidio_enabled
+                            ? "Presidio"
+                            : "Regex"}
+                        </div>
+                        <div
+                          className={`inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold ${
+                            analyzeResult.risk_assessment.presidio_enabled
+                              ? "bg-blue-500 text-white"
+                              : "bg-slate-600 text-slate-200"
+                          }`}
+                        >
+                          <span
+                            className={`w-2 h-2 rounded-full ${
+                              analyzeResult.risk_assessment.presidio_enabled
+                                ? "bg-white animate-pulse"
+                                : "bg-slate-400"
+                            }`}
+                          ></span>
+                          {analyzeResult.risk_assessment.presidio_enabled
+                            ? "Enhanced"
+                            : "Standard"}
+                        </div>
+                      </div>
 
-												{/* Recommended Strategy */}
-												<div className="p-4 bg-white rounded-lg border-2 border-green-300">
-													<div className="flex items-start gap-3">
-														<div className="flex-1">
-															<div className="text-xs font-semibold text-green-700 mb-1">✓ RECOMMENDED STRATEGY</div>
-															<div className="font-bold text-lg text-slate-900">{feature.recommended_strategy}</div>
-															<div className="text-sm text-slate-700 mt-1">{feature.strategy_description}</div>
-															<div className="mt-2 flex gap-4 text-xs text-slate-600">
-																<div>
-																	<strong>Reversible:</strong> {feature.reversible ? 'Yes' : 'No'}
-																</div>
-																<div>
-																	<strong>Use Cases:</strong> {feature.use_cases.join(', ')}
-																</div>
-															</div>
-														</div>
-														<button
-															className="px-4 py-2 bg-green-600 text-white text-sm font-semibold rounded-lg hover:bg-green-500"
-															onClick={() => alert(`Apply ${feature.recommended_strategy} to ${feature.column}`)}
-														>
-															Apply
-														</button>
-													</div>
-												</div>
+                      {/* Violations */}
+                      <div className="bg-white/10 backdrop-blur-sm rounded-xl p-5 border border-white/20">
+                        <div className="text-sm font-medium text-slate-300 mb-2">
+                          ⚠️ Violations
+                        </div>
+                        <div
+                          className={`text-5xl font-black mb-2 ${
+                            (analyzeResult.risk_assessment.violations?.length ||
+                              0) > 0
+                              ? "text-red-400"
+                              : "text-green-400"
+                          }`}
+                        >
+                          {analyzeResult.risk_assessment.violations?.length ||
+                            0}
+                        </div>
+                        <div className="text-xs text-slate-300">
+                          {analyzeResult.risk_assessment.violations?.filter(
+                            (v: any) => v.severity === "CRITICAL",
+                          ).length || 0}{" "}
+                          Critical Issues
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                {/* Risk Categories Grid with Enhanced Design */}
+                <div className="bg-white rounded-xl border-2 border-slate-200 p-6 shadow-lg">
+                  <div className="flex items-center gap-2 mb-6">
+                    <span className="text-2xl">📈</span>
+                    <h3 className="text-xl font-bold text-slate-800">
+                      Category Scores
+                    </h3>
+                  </div>
 
-												{/* Alternative Strategies */}
-												<details className="mt-3">
-													<summary className="text-xs font-semibold text-slate-600 cursor-pointer hover:text-slate-800">
-														View Alternative Strategies
-													</summary>
-													<div className="mt-2 grid grid-cols-1 md:grid-cols-2 gap-2">
-														{Object.entries(piiDetectionResult.available_strategies)
-															.filter(([strategy]) => strategy !== feature.recommended_strategy)
-															.map(([strategy, details]: [string, any]) => (
-																<div key={strategy} className="p-3 bg-white rounded border border-slate-200 hover:border-slate-400">
-																	<div className="font-semibold text-sm text-slate-800">{strategy}</div>
-																	<div className="text-xs text-slate-600 mt-1">{details.description}</div>
-																	<div className="mt-2 flex items-center justify-between">
-																		<span className={`px-2 py-0.5 text-xs rounded ${
-																			details.risk_level === 'HIGH' ? 'bg-red-100 text-red-800' :
-																			details.risk_level === 'MEDIUM' ? 'bg-orange-100 text-orange-800' :
-																			'bg-yellow-100 text-yellow-800'
-																		}`}>
-																			{details.risk_level} Risk
-																		</span>
-																		<button
-																			className="px-2 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-500"
-																			onClick={() => alert(`Apply ${strategy} to ${feature.column}`)}
-																		>
-																			Use This
-																		</button>
-																	</div>
-																</div>
-															))}
-													</div>
-												</details>
-											</div>
-										);
-									})}
-								</div>
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {Object.entries(
+                      analyzeResult.risk_assessment.risk_categories || {},
+                    ).map(([category, score]: [string, any]) => {
+                      const riskPct = score * 100;
+                      const riskLevel =
+                        riskPct >= 70
+                          ? "CRITICAL"
+                          : riskPct >= 50
+                            ? "HIGH"
+                            : riskPct >= 30
+                              ? "MEDIUM"
+                              : "LOW";
+                      const categoryConfig: Record<
+                        string,
+                        { icon: string; label: string; color: string }
+                      > = {
+                        privacy: { icon: "�", label: "Privacy", color: "blue" },
+                        ethical: {
+                          icon: "🟠",
+                          label: "Ethical",
+                          color: "purple",
+                        },
+                        compliance: {
+                          icon: "�",
+                          label: "Compliance",
+                          color: "indigo",
+                        },
+                        security: {
+                          icon: "�",
+                          label: "Security",
+                          color: "cyan",
+                        },
+                        operational: {
+                          icon: "🟠",
+                          label: "Operational",
+                          color: "orange",
+                        },
+                        data_quality: {
+                          icon: "�",
+                          label: "Data Quality",
+                          color: "green",
+                        },
+                      };
 
-								{/* Apply All Button */}
-								<div className="sticky bottom-0 p-4 bg-gradient-to-t from-white via-white to-transparent">
-									<button
-										className="w-full py-3 bg-green-600 text-white font-bold rounded-lg hover:bg-green-500 shadow-lg"
-										onClick={() => alert('Apply all recommended strategies and clean dataset')}
-									>
-										✓ Apply All Recommended Strategies & Clean Dataset
-									</button>
-								</div>
-							</div>
-						) : (
-							<div className="text-center py-12">
-								<div className="text-6xl mb-4">🔍</div>
-								<p className="text-slate-600 mb-2">No PII detection results yet</p>
-								<p className="text-sm text-slate-500">Upload a dataset and click "🔍 Detect PII" to scan for risky features</p>
-							</div>
-						)}
-					</div>
-				);
-			case "results":
-				return (
-					<div className="space-y-4">
-						<h2 className="text-xl font-semibold">Results Summary</h2>
-						{(analyzeResult || cleanResult) ? (
-							<div className="space-y-4">
-								{analyzeResult && (
-									<div className="p-4 bg-white rounded-lg border">
-										<h3 className="font-semibold mb-2">Analysis Results</h3>
-										<div className="text-sm space-y-1">
-											<div>Dataset: {analyzeResult.filename}</div>
-											<div>Rows: {analyzeResult.dataset_info.rows}</div>
-											<div>Columns: {analyzeResult.dataset_info.columns}</div>
-											<div>Bias Score: {(analyzeResult.bias_metrics.overall_bias_score * 100).toFixed(1)}%</div>
-											<div>Risk Score: {(analyzeResult.risk_assessment.overall_risk_score * 100).toFixed(1)}%</div>
-										</div>
-										<a
-											href={getReportUrl(analyzeResult.report_file)}
-											target="_blank"
-											rel="noopener noreferrer"
-											className="mt-3 inline-block text-sm text-brand-600 underline"
-										>
-											Download Full Report →
-										</a>
-									</div>
-								)}
-								
-								{cleanResult && (
-									<div className="p-4 bg-white rounded-lg border">
-										<h3 className="font-semibold mb-2">Cleaning Results</h3>
-										<div className="text-sm space-y-1">
-											<div>Original: {cleanResult.dataset_info.original_rows} rows × {cleanResult.dataset_info.original_columns} cols</div>
-											<div>Cleaned: {cleanResult.dataset_info.cleaned_rows} rows × {cleanResult.dataset_info.cleaned_columns} cols</div>
-											<div>Cells Anonymized: {cleanResult.summary.total_cells_affected}</div>
-											<div>Columns Removed: {cleanResult.summary.columns_removed.length}</div>
-											<div>GDPR Compliant: {cleanResult.gdpr_compliance.length} articles applied</div>
-										</div>
-										<div className="mt-3 flex gap-2">
-											<a
-												href={getReportUrl(cleanResult.files.cleaned_csv)}
-												download
-												className="text-sm text-brand-600 underline"
-											>
-												Download Cleaned CSV →
-											</a>
-											<a
-												href={getReportUrl(cleanResult.files.audit_report)}
-												target="_blank"
-												rel="noopener noreferrer"
-												className="text-sm text-brand-600 underline"
-											>
-												View Audit Report →
-											</a>
-										</div>
-									</div>
-								)}
-							</div>
-						) : (
-							<p className="text-sm text-slate-600">
-								Process a dataset to see aggregated results.
-							</p>
-						)}
-					</div>
-				);
-			default:
-				return null;
-		}
-	}
+                      const config = categoryConfig[category] || {
+                        icon: "📌",
+                        label: category,
+                        color: "slate",
+                      };
 
-		return (
-			<div className="h-full overflow-y-auto p-6 bg-white/60">
-			{renderTabContent()}
-		</div>
-	);
-}
\ No newline at end of file
+                      // Dynamic emoji based on risk level
+                      const riskEmoji =
+                        riskPct < 25 ? "🟢" : riskPct < 50 ? "🟡" : "🟠";
+
+                      return (
+                        <div
+                          key={category}
+                          className={`relative overflow-hidden rounded-xl border-2 p-5 transition-all hover:shadow-xl hover:scale-105 ${
+                            riskLevel === "CRITICAL"
+                              ? "border-red-300 bg-gradient-to-br from-red-50 via-white to-red-50"
+                              : riskLevel === "HIGH"
+                                ? "border-orange-300 bg-gradient-to-br from-orange-50 via-white to-orange-50"
+                                : riskLevel === "MEDIUM"
+                                  ? "border-yellow-300 bg-gradient-to-br from-yellow-50 via-white to-yellow-50"
+                                  : "border-green-300 bg-gradient-to-br from-green-50 via-white to-green-50"
+                          }`}
+                        >
+                          <div className="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-white/50 to-transparent rounded-full blur-2xl"></div>
+
+                          <div className="relative">
+                            <div className="flex items-start justify-between mb-3">
+                              <span className="text-3xl">{riskEmoji}</span>
+                              <span
+                                className={`text-xs font-black px-2.5 py-1 rounded-full shadow-sm ${
+                                  riskLevel === "CRITICAL"
+                                    ? "bg-red-600 text-white"
+                                    : riskLevel === "HIGH"
+                                      ? "bg-orange-600 text-white"
+                                      : riskLevel === "MEDIUM"
+                                        ? "bg-yellow-600 text-white"
+                                        : "bg-green-600 text-white"
+                                }`}
+                              >
+                                {riskLevel}
+                              </span>
+                            </div>
+
+                            <div className="text-sm font-bold text-slate-600 uppercase tracking-wide mb-2">
+                              {config.label}
+                            </div>
+
+                            <div className="text-4xl font-black bg-gradient-to-r from-slate-800 to-slate-600 bg-clip-text text-transparent mb-3">
+                              {riskPct.toFixed(1)}%
+                            </div>
+
+                            {/* Progress Bar */}
+                            <div className="relative h-2 bg-slate-200 rounded-full overflow-hidden shadow-inner">
+                              <div
+                                className={`absolute inset-y-0 left-0 rounded-full transition-all duration-700 ease-out ${
+                                  riskLevel === "CRITICAL"
+                                    ? "bg-gradient-to-r from-red-500 via-red-600 to-red-700"
+                                    : riskLevel === "HIGH"
+                                      ? "bg-gradient-to-r from-orange-500 via-orange-600 to-orange-700"
+                                      : riskLevel === "MEDIUM"
+                                        ? "bg-gradient-to-r from-yellow-500 via-yellow-600 to-yellow-700"
+                                        : "bg-gradient-to-r from-green-500 via-green-600 to-green-700"
+                                }`}
+                                style={{ width: `${Math.min(riskPct, 100)}%` }}
+                              >
+                                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+                {/* Risky Features Analysis - Feature-Level Risk Display */}
+                {analyzeResult.risk_assessment.privacy_risks && (
+                  <div className="bg-white rounded-xl border-2 border-slate-200 p-6 shadow-lg">
+                    <div className="flex items-center gap-2 mb-6">
+                      <span className="text-2xl">⚠️</span>
+                      <h3 className="text-xl font-bold text-slate-800">
+                        Risky Features & Columns
+                      </h3>
+                      <span className="ml-auto px-3 py-1 bg-red-100 text-red-700 rounded-full text-xs font-semibold">
+                        {typeof analyzeResult.risk_assessment.privacy_risks ===
+                          "object" &&
+                        !Array.isArray(
+                          analyzeResult.risk_assessment.privacy_risks,
+                        )
+                          ? analyzeResult.risk_assessment.privacy_risks
+                              .pii_count || 0
+                          : Array.isArray(
+                                analyzeResult.risk_assessment.privacy_risks,
+                              )
+                            ? analyzeResult.risk_assessment.privacy_risks.length
+                            : 0}{" "}
+                        Risky Features Found
+                      </span>
+                    </div>
+
+                    {/* Risky Features List */}
+                    {typeof analyzeResult.risk_assessment.privacy_risks ===
+                      "object" &&
+                    !Array.isArray(
+                      analyzeResult.risk_assessment.privacy_risks,
+                    ) &&
+                    analyzeResult.risk_assessment.privacy_risks.pii_detected &&
+                    analyzeResult.risk_assessment.privacy_risks.pii_detected
+                      .length > 0 ? (
+                      <div className="space-y-4">
+                        {/* Privacy Risk Metrics Summary */}
+                        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 p-4 bg-gradient-to-br from-red-50 to-orange-50 rounded-lg border-2 border-red-200">
+                          <div className="text-center">
+                            <div className="text-xs text-slate-600 mb-1 font-semibold">
+                              Re-Identification Risk
+                            </div>
+                            <div
+                              className={`text-3xl font-black ${
+                                (analyzeResult.risk_assessment.privacy_risks
+                                  .reidentification_risk || 0) > 0.7
+                                  ? "text-red-600"
+                                  : (analyzeResult.risk_assessment.privacy_risks
+                                        .reidentification_risk || 0) > 0.4
+                                    ? "text-orange-600"
+                                    : "text-green-600"
+                              }`}
+                            >
+                              {analyzeResult.risk_assessment.privacy_risks
+                                .reidentification_risk
+                                ? (
+                                    analyzeResult.risk_assessment.privacy_risks
+                                      .reidentification_risk * 100
+                                  ).toFixed(0)
+                                : 0}
+                              %
+                            </div>
+                            <div className="text-xs text-slate-500 mt-1">
+                              Can individuals be identified?
+                            </div>
+                          </div>
+                          <div className="text-center">
+                            <div className="text-xs text-slate-600 mb-1 font-semibold">
+                              Data Minimization
+                            </div>
+                            <div
+                              className={`text-3xl font-black ${
+                                (analyzeResult.risk_assessment.privacy_risks
+                                  .data_minimization_score || 0) > 0.7
+                                  ? "text-green-600"
+                                  : (analyzeResult.risk_assessment.privacy_risks
+                                        .data_minimization_score || 0) > 0.4
+                                    ? "text-orange-600"
+                                    : "text-red-600"
+                              }`}
+                            >
+                              {analyzeResult.risk_assessment.privacy_risks
+                                .data_minimization_score
+                                ? (
+                                    analyzeResult.risk_assessment.privacy_risks
+                                      .data_minimization_score * 100
+                                  ).toFixed(0)
+                                : 0}
+                              %
+                            </div>
+                            <div className="text-xs text-slate-500 mt-1">
+                              Collecting only necessary data
+                            </div>
+                          </div>
+                          <div className="text-center">
+                            <div className="text-xs text-slate-600 mb-1 font-semibold">
+                              Anonymization Level
+                            </div>
+                            <div
+                              className={`text-sm font-black px-3 py-1 rounded-full inline-block ${
+                                analyzeResult.risk_assessment.privacy_risks
+                                  .anonymization_level === "FULL"
+                                  ? "bg-green-100 text-green-700"
+                                  : analyzeResult.risk_assessment.privacy_risks
+                                        .anonymization_level === "PARTIAL"
+                                    ? "bg-yellow-100 text-yellow-700"
+                                    : "bg-red-100 text-red-700"
+                              }`}
+                            >
+                              {analyzeResult.risk_assessment.privacy_risks
+                                .anonymization_level || "NONE"}
+                            </div>
+                            <div className="text-xs text-slate-500 mt-1">
+                              Protection applied
+                            </div>
+                          </div>
+                          <div className="text-center">
+                            <div className="text-xs text-slate-600 mb-1 font-semibold">
+                              Detection Method
+                            </div>
+                            <div className="text-sm font-bold text-slate-800 px-3 py-1 bg-white rounded border-2 border-slate-300 inline-block">
+                              {analyzeResult.risk_assessment.privacy_risks
+                                .detection_method || "Auto"}
+                            </div>
+                            <div className="text-xs text-slate-500 mt-1">
+                              Analysis engine used
+                            </div>
+                          </div>
+                        </div>
+
+                        {/* Individual Risky Features */}
+                        <div className="space-y-3">
+                          <h4 className="font-bold text-slate-700 flex items-center gap-2">
+                            <span>🔍</span> Detailed Feature Risk Analysis
+                          </h4>
+                          {analyzeResult.risk_assessment.privacy_risks.pii_detected.map(
+                            (pii: any, idx: number) => {
+                              // Map PII types to risk explanations with GDPR Article references
+                              const riskExplanations: Record<
+                                string,
+                                {
+                                  why: string;
+                                  impact: string;
+                                  gdprArticles: string[];
+                                  actions: string[];
+                                }
+                              > = {
+                                EMAIL_ADDRESS: {
+                                  why: "Email addresses are direct identifiers that can be used to contact and track individuals across systems, creating privacy risks.",
+                                  impact:
+                                    "HIGH RISK: Can lead to identity theft, phishing attacks, unauthorized marketing, and privacy violations under GDPR Article 6.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Definition of Personal Data: Email is personally identifiable information",
+                                    "Article 6 - Lawful Basis Required: Processing requires consent, contract, or legitimate interest",
+                                    "Article 7 - Consent Conditions: Must obtain explicit, informed consent",
+                                    "Article 17 - Right to Erasure: Users can request email deletion",
+                                    "Article 21 - Right to Object: Users can opt out of email processing",
+                                  ],
+                                  actions: [
+                                    "Encrypt email addresses",
+                                    "Hash or pseudonymize for analytics",
+                                    "Implement consent management",
+                                    "Enable right to erasure",
+                                    "Provide opt-out mechanisms",
+                                  ],
+                                },
+                                EMAIL: {
+                                  why: "Email addresses are direct identifiers that can be used to contact and track individuals across systems.",
+                                  impact:
+                                    "HIGH RISK: Can lead to identity theft, phishing attacks, unauthorized marketing, and privacy violations.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Personal Data Definition",
+                                    "Article 6 - Lawful Basis for Processing",
+                                    "Article 7 - Conditions for Consent",
+                                    "Article 17 - Right to Erasure",
+                                  ],
+                                  actions: [
+                                    "Encrypt email addresses",
+                                    "Implement consent management",
+                                    "Enable deletion on request",
+                                    "Apply data minimization",
+                                  ],
+                                },
+                                PHONE_NUMBER: {
+                                  why: "Phone numbers directly identify individuals and enable real-time contact, creating opportunities for harassment and fraud.",
+                                  impact:
+                                    "HIGH RISK: Enables unwanted contact, harassment, SIM swapping attacks, location tracking, and telemarketing violations.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Personal Data: Phone numbers identify natural persons",
+                                    "Article 6 - Lawfulness of Processing: Requires lawful basis",
+                                    "Article 32 - Security of Processing: Must implement appropriate security measures",
+                                    "Article 21 - Right to Object to Processing",
+                                    "ePrivacy Directive - Consent required for electronic communications",
+                                  ],
+                                  actions: [
+                                    "Remove if not essential",
+                                    "Apply tokenization",
+                                    "Restrict access controls",
+                                    "Implement call verification",
+                                    "Enable number suppression",
+                                  ],
+                                },
+                                PHONE: {
+                                  why: "Phone numbers are direct personal identifiers enabling contact and tracking.",
+                                  impact:
+                                    "HIGH RISK: Harassment, fraud, and unauthorized marketing.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Personal Data",
+                                    "Article 6 - Lawful Processing",
+                                    "Article 32 - Security Measures",
+                                  ],
+                                  actions: [
+                                    "Tokenize phone numbers",
+                                    "Implement access controls",
+                                    "Enable opt-out",
+                                  ],
+                                },
+                                PERSON: {
+                                  why: "Personal names are primary identifiers. Combined with other quasi-identifiers (age, location), they enable complete re-identification.",
+                                  impact:
+                                    "MEDIUM-HIGH RISK: When combined with location, age, or other quasi-identifiers, creates high re-identification risk violating k-anonymity.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Personal Data: Names identify natural persons",
+                                    "Article 5(1)(c) - Data Minimization: Collect only necessary data",
+                                    "Article 5(1)(e) - Storage Limitation: Keep only as long as necessary",
+                                    "Article 25 - Data Protection by Design and Default",
+                                    "Article 32(1)(a) - Pseudonymization and encryption requirements",
+                                  ],
+                                  actions: [
+                                    "Use pseudonyms or IDs",
+                                    "Apply k-anonymity techniques (k≥5)",
+                                    "Separate name from sensitive attributes",
+                                    "Implement access logging",
+                                    "Apply l-diversity for protection",
+                                  ],
+                                },
+                                NAME: {
+                                  why: "Names are direct personal identifiers that enable individual identification.",
+                                  impact:
+                                    "MEDIUM-HIGH RISK: Re-identification when combined with other data.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Personal Data",
+                                    "Article 5(1)(c) - Data Minimization",
+                                    "Article 25 - Data Protection by Design",
+                                  ],
+                                  actions: [
+                                    "Use pseudonyms",
+                                    "Apply k-anonymity",
+                                    "Implement access logging",
+                                  ],
+                                },
+                                LOCATION: {
+                                  why: "Location data reveals where individuals live, work, and travel, exposing personal patterns, habits, and sensitive locations (hospitals, religious sites).",
+                                  impact:
+                                    "HIGH RISK: Can expose home addresses, workplaces, medical facilities, places of worship, creating discrimination and stalking risks.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Personal Data: Location identifies individuals",
+                                    "Article 9(1) - Special Categories: Location at sensitive sites reveals protected characteristics",
+                                    "Article 32 - Security Measures: Encryption and access controls required",
+                                    "Article 35 - Data Protection Impact Assessment: Required for location tracking",
+                                    "Recital 30 - Online identifiers and location data",
+                                  ],
+                                  actions: [
+                                    "Generalize to zip code or city level",
+                                    "Apply geographic masking",
+                                    "Remove precise coordinates",
+                                    "Implement geofencing",
+                                    "Conduct DPIA",
+                                    "Apply differential privacy",
+                                  ],
+                                },
+                                ADDRESS: {
+                                  why: "Physical addresses directly identify individuals and their home locations.",
+                                  impact:
+                                    "HIGH RISK: Enables stalking, burglary, and privacy violations.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Personal Data",
+                                    "Article 9 - Special Categories (if sensitive location)",
+                                    "Article 32 - Security Measures",
+                                  ],
+                                  actions: [
+                                    "Generalize to zip code",
+                                    "Apply geographic masking",
+                                    "Restrict access",
+                                  ],
+                                },
+                                SSN: {
+                                  why: "Social Security Numbers are PERMANENT unique identifiers used across critical systems (banking, taxes, healthcare, employment).",
+                                  impact:
+                                    "CRITICAL RISK: Enables complete identity theft, fraudulent credit, tax fraud, medical identity theft, and unauthorized government benefits access.",
+                                  gdprArticles: [
+                                    "Article 9(1) - Special Category Data: Often linked to health/financial data",
+                                    "Article 32 - Security of Processing: Encryption, access controls, pseudonymization mandatory",
+                                    "Article 33 - Breach Notification: Immediate notification required",
+                                    "Article 34 - Data Subject Notification: Notify individuals of breaches",
+                                    "Article 35 - Data Protection Impact Assessment: DPIA required",
+                                    "Recital 75 - High risk to rights and freedoms",
+                                  ],
+                                  actions: [
+                                    "REMOVE IMMEDIATELY if possible",
+                                    "Encrypt with AES-256",
+                                    "Never display in full",
+                                    "Implement strict access controls",
+                                    "Conduct DPIA",
+                                    "Enable breach detection",
+                                    "Maintain audit logs",
+                                  ],
+                                },
+                                US_SSN: {
+                                  why: "US Social Security Numbers are permanent government identifiers linked to financial, medical, employment, and government benefits.",
+                                  impact:
+                                    "CRITICAL RISK: Highest identity theft risk. Compromise leads to decades of fraud, financial damage, and cannot be changed.",
+                                  gdprArticles: [
+                                    "Article 9(1) - Special Category: Links to health and financial data",
+                                    "Article 32 - Security Measures: State-of-the-art encryption required",
+                                    "Article 33 - Breach Notification: 72-hour notification to supervisory authority",
+                                    "Article 34 - Communication to Data Subjects: Immediate notification",
+                                    "Article 35 - DPIA: Mandatory impact assessment",
+                                  ],
+                                  actions: [
+                                    "Encrypt end-to-end with AES-256",
+                                    "Use last 4 digits only for display",
+                                    "Implement multi-factor authentication",
+                                    "Enable breach detection",
+                                    "Create comprehensive audit trails",
+                                    "Apply tokenization",
+                                    "Conduct annual security audits",
+                                  ],
+                                },
+                                CREDIT_CARD: {
+                                  why: "Credit card numbers provide direct access to financial accounts and purchasing power, subject to PCI-DSS and GDPR.",
+                                  impact:
+                                    "CRITICAL RISK: Financial fraud, unauthorized transactions, PCI-DSS violations (fines up to $500K/month), GDPR violations (4% global revenue).",
+                                  gdprArticles: [
+                                    "Article 4(1) - Personal Data: Financial identifiers",
+                                    "Article 32 - Security of Processing: PCI-DSS Level 1 compliance mandatory",
+                                    "Article 33 - Breach Notification: Immediate reporting required",
+                                    "Article 34 - Data Subject Notification",
+                                    "PCI-DSS Standards: Cannot store CVV, must tokenize",
+                                  ],
+                                  actions: [
+                                    "Tokenize immediately",
+                                    "Never store CVV/CVC",
+                                    "Use PCI-compliant vault",
+                                    "Implement fraud detection",
+                                    "Apply end-to-end encryption",
+                                    "Use 3D Secure",
+                                    "Maintain PCI-DSS certification",
+                                    "Conduct quarterly security scans",
+                                  ],
+                                },
+                                CARD: {
+                                  why: "Card numbers enable direct financial access.",
+                                  impact:
+                                    "CRITICAL RISK: Financial fraud and PCI-DSS violations.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Personal Data",
+                                    "Article 32 - Security Measures",
+                                    "PCI-DSS Compliance",
+                                  ],
+                                  actions: [
+                                    "Tokenize immediately",
+                                    "Use PCI-compliant vault",
+                                    "Never store CVV",
+                                  ],
+                                },
+                                IP_ADDRESS: {
+                                  why: "IP addresses are online identifiers that track user behavior, reveal location, and enable device fingerprinting across websites.",
+                                  impact:
+                                    "MEDIUM RISK: Enables tracking across websites, reveals approximate location, can be linked to individuals, violates ePrivacy Directive.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Personal Data: Online identifier",
+                                    "Article 6 - Lawful Basis: Requires consent or legitimate interest",
+                                    "ePrivacy Directive - Consent for cookies and tracking",
+                                    "Recital 30 - Online identifiers and IP addresses",
+                                    "Article 21 - Right to Object to profiling",
+                                  ],
+                                  actions: [
+                                    "Truncate last octet for IPv4",
+                                    "Hash for analytics",
+                                    "Implement IP anonymization",
+                                    "Reduce retention period to 90 days",
+                                    "Provide opt-out for tracking",
+                                    "Apply differential privacy",
+                                  ],
+                                },
+                                IP: {
+                                  why: "IP addresses are online identifiers enabling tracking.",
+                                  impact:
+                                    "MEDIUM RISK: Cross-site tracking and location revelation.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Online Identifier",
+                                    "Article 6 - Lawful Basis",
+                                    "ePrivacy Directive",
+                                  ],
+                                  actions: [
+                                    "Truncate IP addresses",
+                                    "Hash for analytics",
+                                    "Reduce retention",
+                                  ],
+                                },
+                                MEDICAL_LICENSE: {
+                                  why: "Medical information is SPECIAL CATEGORY DATA under GDPR Article 9, requiring the highest level of protection due to discrimination risks.",
+                                  impact:
+                                    "CRITICAL RISK: Health data breach leads to discrimination, insurance denial, employment issues, severe privacy violations, and HIPAA fines.",
+                                  gdprArticles: [
+                                    "Article 9(1) - Special Category (Health Data): Explicit consent required",
+                                    "Article 9(2)(h) - Health/social care exception",
+                                    "Article 32 - Security of Processing: Encryption mandatory",
+                                    "Article 35 - DPIA: Impact assessment required",
+                                    "Article 25 - Data Protection by Design",
+                                    "HIPAA Compliance (if applicable)",
+                                  ],
+                                  actions: [
+                                    "Encrypt with healthcare-grade security (AES-256)",
+                                    "Implement role-based access control (RBAC)",
+                                    "Conduct Data Protection Impact Assessment",
+                                    "Apply strict retention policies",
+                                    "Ensure HIPAA compliance",
+                                    "Use de-identification techniques",
+                                    "Maintain comprehensive audit logs",
+                                  ],
+                                },
+                                MEDICAL: {
+                                  why: "Medical data is special category data requiring explicit consent.",
+                                  impact:
+                                    "CRITICAL RISK: Discrimination and severe privacy violations.",
+                                  gdprArticles: [
+                                    "Article 9(1) - Special Category (Health)",
+                                    "Article 32 - Security",
+                                    "Article 35 - DPIA Required",
+                                  ],
+                                  actions: [
+                                    "Encrypt data",
+                                    "Implement RBAC",
+                                    "Conduct DPIA",
+                                  ],
+                                },
+                                US_DRIVER_LICENSE: {
+                                  why: "Driver license numbers are government-issued identifiers used for identity verification across financial, healthcare, and government systems.",
+                                  impact:
+                                    "HIGH RISK: Identity fraud, fake ID creation, unauthorized access to services, and DMV record access.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Personal Data: Government identifier",
+                                    "Article 6 - Lawful Processing: Document lawful basis",
+                                    "Article 32 - Security Measures: Encryption and access controls",
+                                    "Article 15 - Right of Access: Individuals can request data",
+                                    "Article 17 - Right to Erasure: Deletion on request",
+                                  ],
+                                  actions: [
+                                    "Hash or encrypt license numbers",
+                                    "Limit to identity verification only",
+                                    "Never display in full",
+                                    "Implement verification logging",
+                                    "Apply pseudonymization",
+                                    "Enable deletion mechanisms",
+                                  ],
+                                },
+                                LICENSE: {
+                                  why: "License numbers are government identifiers.",
+                                  impact:
+                                    "HIGH RISK: Identity fraud and unauthorized access.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Personal Data",
+                                    "Article 6 - Lawful Processing",
+                                    "Article 32 - Security",
+                                  ],
+                                  actions: [
+                                    "Hash license numbers",
+                                    "Limit to verification",
+                                    "Never display in full",
+                                  ],
+                                },
+                                US_PASSPORT: {
+                                  why: "Passport numbers are international identity documents used for travel and high-security identification, recognized globally.",
+                                  impact:
+                                    "CRITICAL RISK: International identity fraud, unauthorized travel booking, visa fraud, and access to secure facilities.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Personal Data: Unique government identifier",
+                                    "Article 32 - Security Measures: State-of-the-art encryption required",
+                                    "Article 35 - Impact Assessment: DPIA for high-risk processing",
+                                    "Article 5(1)(f) - Integrity and Confidentiality",
+                                    "Cross-border data transfer regulations",
+                                  ],
+                                  actions: [
+                                    "Encrypt with strong encryption (AES-256)",
+                                    "Restrict access to authorized personnel only",
+                                    "Implement tamper detection",
+                                    "Apply geographic access controls",
+                                    "Maintain detailed audit trails",
+                                    "Use tokenization",
+                                    "Implement MFA for access",
+                                  ],
+                                },
+                                PASSPORT: {
+                                  why: "Passport numbers enable international identification.",
+                                  impact:
+                                    "CRITICAL RISK: International fraud and unauthorized travel.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Personal Data",
+                                    "Article 32 - Security Measures",
+                                    "Article 35 - Impact Assessment",
+                                  ],
+                                  actions: [
+                                    "Encrypt passports",
+                                    "Restrict access",
+                                    "Implement tamper detection",
+                                  ],
+                                },
+                                US_BANK_NUMBER: {
+                                  why: "Bank account numbers provide DIRECT ACCESS to financial accounts and enable ACH transfers, wire transfers, and direct debits.",
+                                  impact:
+                                    "CRITICAL RISK: Unauthorized withdrawals, ACH fraud, wire transfer fraud, complete account takeover, and financial ruin.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Personal Data: Financial identifier",
+                                    "Article 32 - Security Measures: Encryption and tokenization mandatory",
+                                    "Article 33 - Breach Notification: 72-hour notification",
+                                    "Article 34 - Data Subject Notification: Immediate alert to account holders",
+                                    "PSD2 - Strong Customer Authentication required",
+                                  ],
+                                  actions: [
+                                    "Tokenize immediately",
+                                    "Never display account numbers",
+                                    "Use secure payment gateways",
+                                    "Implement transaction monitoring",
+                                    "Apply multi-factor authentication",
+                                    "Use Strong Customer Authentication (SCA)",
+                                    "Enable fraud alerts",
+                                    "Encrypt at rest and in transit",
+                                  ],
+                                },
+                                BANK_ACCOUNT: {
+                                  why: "Bank account numbers enable direct financial access.",
+                                  impact:
+                                    "CRITICAL RISK: Financial fraud and account takeover.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Personal Data",
+                                    "Article 32 - Security Measures",
+                                    "Article 33 - Breach Notification",
+                                  ],
+                                  actions: [
+                                    "Tokenize accounts",
+                                    "Never display numbers",
+                                    "Implement MFA",
+                                  ],
+                                },
+                                DOB: {
+                                  why: "Date of birth is a quasi-identifier that combined with other data enables re-identification and age-based discrimination.",
+                                  impact:
+                                    "MEDIUM-HIGH RISK: Combined with name and zip code, enables 87% re-identification rate. Age discrimination risk.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Personal Data: Quasi-identifier",
+                                    "Article 5(1)(c) - Data Minimization: Use age ranges instead",
+                                    "Article 9 - Special Categories: Can reveal protected characteristics",
+                                    "Article 22 - Automated Decision-Making: Age-based profiling restrictions",
+                                    "Recital 26 - Pseudonymization reduces risks",
+                                  ],
+                                  actions: [
+                                    "Use age ranges instead of exact DOB",
+                                    "Apply k-anonymity (k≥5)",
+                                    "Generalize to year or month",
+                                    "Separate from other identifiers",
+                                    "Implement access controls",
+                                    "Apply l-diversity",
+                                  ],
+                                },
+                                ZIP_CODE: {
+                                  why: "ZIP codes are geographic quasi-identifiers. Research shows 87% of US population uniquely identified by ZIP + DOB + Gender.",
+                                  impact:
+                                    "MEDIUM RISK: When combined with DOB and gender, enables 87% re-identification. Reveals socioeconomic status and demographics.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Personal Data: Quasi-identifier",
+                                    "Article 5(1)(c) - Data Minimization",
+                                    "Article 32(1)(a) - Pseudonymization",
+                                    "Recital 26 - Anonymization techniques",
+                                    "Article 25 - Data Protection by Default",
+                                  ],
+                                  actions: [
+                                    "Generalize to first 3 digits",
+                                    "Use geographic aggregation",
+                                    "Apply k-anonymity",
+                                    "Combine with other anonymization techniques",
+                                    "Separate from name and DOB",
+                                  ],
+                                },
+                                IBAN_CODE: {
+                                  why: "IBAN (International Bank Account Number) provides access to bank accounts across European Economic Area.",
+                                  impact:
+                                    "CRITICAL RISK: International financial fraud, SEPA direct debit fraud, and cross-border money theft.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Personal Data",
+                                    "Article 32 - Security of Processing",
+                                    "Article 33 - Breach Notification",
+                                    "PSD2 - Strong Customer Authentication",
+                                  ],
+                                  actions: [
+                                    "Tokenize IBAN",
+                                    "Implement SCA",
+                                    "Use secure payment processors",
+                                    "Enable fraud monitoring",
+                                    "Apply encryption",
+                                  ],
+                                },
+                                CRYPTO: {
+                                  why: "Cryptocurrency addresses and wallets are permanent financial identifiers that cannot be changed if compromised.",
+                                  impact:
+                                    "CRITICAL RISK: Irreversible financial theft, no fraud protection, transaction history exposure, wallet draining.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Personal Data: Cryptocurrency addresses can identify individuals",
+                                    "Article 5(1)(f) - Security Principle",
+                                    "Article 32 - Security Measures: Multi-signature and cold storage",
+                                    "Article 17 - Right to Erasure: Blockchain immutability challenges",
+                                  ],
+                                  actions: [
+                                    "Use multi-signature wallets",
+                                    "Implement cold storage",
+                                    "Never display private keys",
+                                    "Use hardware security modules",
+                                    "Apply address rotation",
+                                    "Implement withdrawal limits",
+                                  ],
+                                },
+                              };
+
+                              // Fallback for unmapped PII types
+                              const riskInfo = riskExplanations[pii.type] ||
+                                riskExplanations[pii.type.toUpperCase()] || {
+                                  why: "This data type contains personal information that could identify individuals or reveal sensitive patterns according to GDPR Article 4(1).",
+                                  impact:
+                                    "POTENTIAL RISK: May violate privacy regulations if not properly protected. Could enable tracking, profiling, or discrimination.",
+                                  gdprArticles: [
+                                    "Article 4(1) - Definition of Personal Data",
+                                    "Article 5 - Principles: Lawfulness, Fairness, Transparency",
+                                    "Article 6 - Lawful Basis Required for Processing",
+                                    "Article 24 - Responsibility of the Controller",
+                                    "Article 25 - Data Protection by Design and Default",
+                                  ],
+                                  actions: [
+                                    "Review necessity of this data field",
+                                    "Apply appropriate anonymization techniques",
+                                    "Implement access controls and audit logging",
+                                    "Document lawful basis for processing",
+                                    "Conduct Privacy Impact Assessment",
+                                  ],
+                                };
+
+                              return (
+                                <div
+                                  key={idx}
+                                  className={`group relative overflow-hidden rounded-xl border-2 p-6 transition-all hover:shadow-xl ${
+                                    pii.severity === "CRITICAL"
+                                      ? "bg-gradient-to-br from-red-50 via-white to-red-100 border-red-400"
+                                      : pii.severity === "HIGH"
+                                        ? "bg-gradient-to-br from-orange-50 via-white to-orange-100 border-orange-400"
+                                        : pii.severity === "MEDIUM"
+                                          ? "bg-gradient-to-br from-yellow-50 via-white to-yellow-100 border-yellow-400"
+                                          : "bg-gradient-to-br from-blue-50 via-white to-blue-100 border-blue-400"
+                                  }`}
+                                >
+                                  <div className="absolute top-0 right-0 w-40 h-40 bg-white/30 rounded-full blur-3xl"></div>
+
+                                  <div className="relative">
+                                    {/* Feature Header */}
+                                    <div className="flex items-start justify-between mb-4">
+                                      <div className="flex-1">
+                                        <div className="flex items-center gap-3 mb-2">
+                                          <span className="text-3xl">
+                                            {pii.severity === "CRITICAL"
+                                              ? "🔴"
+                                              : pii.severity === "HIGH"
+                                                ? "🟠"
+                                                : pii.severity === "MEDIUM"
+                                                  ? "🟡"
+                                                  : "🔵"}
+                                          </span>
+                                          <div>
+                                            <div className="font-mono text-xl font-black text-slate-800">
+                                              {pii.column}
+                                            </div>
+                                            <div className="text-sm text-slate-600 mt-1">
+                                              <span className="font-semibold">
+                                                PII Type:
+                                              </span>{" "}
+                                              {pii.type.replace(/_/g, " ")}
+                                              {pii.occurrences && (
+                                                <>
+                                                  <span className="mx-2">
+                                                    •
+                                                  </span>
+                                                  <span className="font-semibold">
+                                                    Found in:
+                                                  </span>{" "}
+                                                  {pii.occurrences} rows
+                                                </>
+                                              )}
+                                              {pii.confidence && (
+                                                <>
+                                                  <span className="mx-2">
+                                                    •
+                                                  </span>
+                                                  <span className="font-semibold">
+                                                    Confidence:
+                                                  </span>{" "}
+                                                  {(
+                                                    pii.confidence * 100
+                                                  ).toFixed(0)}
+                                                  %
+                                                </>
+                                              )}
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                      <span
+                                        className={`px-4 py-2 rounded-full text-xs font-black shadow-lg ${
+                                          pii.severity === "CRITICAL"
+                                            ? "bg-red-600 text-white"
+                                            : pii.severity === "HIGH"
+                                              ? "bg-orange-600 text-white"
+                                              : pii.severity === "MEDIUM"
+                                                ? "bg-yellow-600 text-white"
+                                                : "bg-blue-600 text-white"
+                                        }`}
+                                      >
+                                        {pii.severity} RISK
+                                      </span>
+                                    </div>
+
+                                    {/* Why is this risky? */}
+                                    <div className="mb-4 p-4 bg-white rounded-lg border-2 border-slate-200">
+                                      <div className="flex items-start gap-2 mb-2">
+                                        <span className="text-xl">❓</span>
+                                        <div className="flex-1">
+                                          <div className="text-sm font-black text-slate-700 mb-2">
+                                            WHY IS THIS FEATURE RISKY?
+                                          </div>
+                                          <p className="text-sm text-slate-700 leading-relaxed">
+                                            {riskInfo.why}
+                                          </p>
+                                        </div>
+                                      </div>
+                                    </div>
+
+                                    {/* Impact */}
+                                    <div className="mb-4 p-4 bg-gradient-to-r from-red-50 to-orange-50 rounded-lg border-2 border-red-200">
+                                      <div className="flex items-start gap-2 mb-2">
+                                        <span className="text-xl">⚠️</span>
+                                        <div className="flex-1">
+                                          <div className="text-sm font-black text-red-800 mb-2">
+                                            POTENTIAL IMPACT IF EXPOSED
+                                          </div>
+                                          <p className="text-sm text-slate-800 leading-relaxed font-semibold">
+                                            {riskInfo.impact}
+                                          </p>
+                                        </div>
+                                      </div>
+                                    </div>
+
+                                    {/* GDPR Articles Violated */}
+                                    <div className="mb-4 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border-2 border-blue-200">
+                                      <div className="flex items-start gap-2 mb-2">
+                                        <span className="text-xl">⚖️</span>
+                                        <div className="flex-1">
+                                          <div className="text-sm font-black text-blue-800 mb-2">
+                                            GDPR ARTICLES VIOLATED / APPLICABLE
+                                          </div>
+                                          <div className="space-y-1">
+                                            {riskInfo.gdprArticles.map(
+                                              (article, i) => (
+                                                <div
+                                                  key={i}
+                                                  className="flex items-start gap-2"
+                                                >
+                                                  <span className="text-blue-600 mt-1">
+                                                    •
+                                                  </span>
+                                                  <span className="text-sm text-slate-800 font-semibold">
+                                                    {article}
+                                                  </span>
+                                                </div>
+                                              ),
+                                            )}
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+
+                                    {/* Recommended Actions */}
+                                    <div className="p-4 bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg border-2 border-green-300">
+                                      <div className="flex items-start gap-2 mb-3">
+                                        <span className="text-xl">✅</span>
+                                        <div className="flex-1">
+                                          <div className="text-sm font-black text-green-800 mb-2">
+                                            RECOMMENDED ACTIONS TO REDUCE RISK
+                                          </div>
+                                          <ul className="space-y-2">
+                                            {riskInfo.actions.map(
+                                              (action, i) => (
+                                                <li
+                                                  key={i}
+                                                  className="flex items-start gap-2"
+                                                >
+                                                  <span className="text-green-600 font-bold mt-0.5">
+                                                    {i + 1}.
+                                                  </span>
+                                                  <span className="text-sm text-slate-800 font-medium">
+                                                    {action}
+                                                  </span>
+                                                </li>
+                                              ),
+                                            )}
+                                          </ul>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              );
+                            },
+                          )}
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="text-sm text-slate-600 bg-green-50 border border-green-200 rounded-lg p-4 flex items-center gap-3">
+                        <span className="text-2xl">✓</span>
+                        <div>
+                          <div className="font-semibold text-green-800">
+                            No PII Detected
+                          </div>
+                          <div className="text-xs text-slate-600 mt-1">
+                            Dataset appears to be free of personally
+                            identifiable information
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                )}{" "}
+                {/* Violations Section with Enhanced Design */}
+                {analyzeResult.risk_assessment.violations &&
+                  analyzeResult.risk_assessment.violations.length > 0 && (
+                    <div className="bg-gradient-to-br from-red-50 via-white to-orange-50 rounded-xl border-2 border-red-200 p-6 shadow-lg">
+                      <div className="flex items-center gap-3 mb-5">
+                        <span className="text-3xl">⚠️</span>
+                        <h3 className="text-xl font-bold text-slate-800">
+                          Violations
+                        </h3>
+                        <span className="ml-auto px-4 py-1.5 bg-red-600 text-white rounded-full text-sm font-black shadow-md">
+                          {analyzeResult.risk_assessment.violations.length}{" "}
+                          Issues Found
+                        </span>
+                      </div>
+
+                      <div className="space-y-3">
+                        {analyzeResult.risk_assessment.violations.map(
+                          (violation: any, idx: number) => (
+                            <div
+                              key={idx}
+                              className={`group relative overflow-hidden p-5 rounded-xl border-2 transition-all hover:shadow-lg hover:scale-[1.02] ${
+                                violation.severity === "CRITICAL"
+                                  ? "bg-gradient-to-r from-red-50 to-red-100 border-red-300"
+                                  : violation.severity === "HIGH"
+                                    ? "bg-gradient-to-r from-orange-50 to-orange-100 border-orange-300"
+                                    : violation.severity === "MEDIUM"
+                                      ? "bg-gradient-to-r from-yellow-50 to-yellow-100 border-yellow-300"
+                                      : "bg-gradient-to-r from-blue-50 to-blue-100 border-blue-300"
+                              }`}
+                            >
+                              <div className="absolute top-0 right-0 w-32 h-32 bg-white/20 rounded-full blur-3xl"></div>
+
+                              <div className="relative">
+                                <div className="flex items-start justify-between gap-3 mb-3">
+                                  <div className="flex items-center gap-2">
+                                    <span
+                                      className={`text-xs font-black px-3 py-1.5 rounded-full shadow-sm ${
+                                        violation.severity === "CRITICAL"
+                                          ? "bg-red-600 text-white"
+                                          : violation.severity === "HIGH"
+                                            ? "bg-orange-600 text-white"
+                                            : violation.severity === "MEDIUM"
+                                              ? "bg-yellow-600 text-slate-900"
+                                              : "bg-blue-600 text-white"
+                                      }`}
+                                    >
+                                      {violation.severity}
+                                    </span>
+                                    <span className="text-xs font-bold text-slate-500 uppercase tracking-wider">
+                                      {violation.category}
+                                    </span>
+                                  </div>
+                                </div>
+
+                                <div className="flex items-start gap-3">
+                                  <span className="text-2xl mt-1">
+                                    {violation.severity === "CRITICAL"
+                                      ? "🔴"
+                                      : violation.severity === "HIGH"
+                                        ? "🟠"
+                                        : violation.severity === "MEDIUM"
+                                          ? "🟡"
+                                          : "🔵"}
+                                  </span>
+                                  <div className="flex-1">
+                                    <div className="text-base font-bold text-slate-800 mb-1">
+                                      {violation.message}
+                                    </div>
+                                    {violation.details && (
+                                      <div className="text-sm text-slate-600 leading-relaxed">
+                                        {violation.details}
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          ),
+                        )}
+                      </div>
+                    </div>
+                  )}
+                {/* Key Insights Section with Enhanced Design */}
+                {analyzeResult.risk_assessment.insights &&
+                  analyzeResult.risk_assessment.insights.length > 0 && (
+                    <div className="relative overflow-hidden bg-gradient-to-br from-blue-600 via-indigo-600 to-purple-600 rounded-xl border-2 border-blue-700 p-8 shadow-2xl">
+                      <div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full blur-3xl"></div>
+                      <div className="absolute bottom-0 left-0 w-48 h-48 bg-purple-500/10 rounded-full blur-3xl"></div>
+
+                      <div className="relative">
+                        <div className="flex items-center gap-3 mb-6">
+                          <span className="text-4xl">💡</span>
+                          <h3 className="text-2xl font-black text-white">
+                            Key Insights
+                          </h3>
+                        </div>
+
+                        <div className="space-y-3">
+                          {analyzeResult.risk_assessment.insights.map(
+                            (insight: string, idx: number) => (
+                              <div
+                                key={idx}
+                                className="flex items-start gap-3 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg p-4 hover:bg-white/15 transition-all"
+                              >
+                                <span className="text-yellow-300 text-xl mt-0.5 flex-shrink-0">
+                                  •
+                                </span>
+                                <span className="text-white text-sm leading-relaxed font-medium">
+                                  {insight}
+                                </span>
+                              </div>
+                            ),
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                {/* Compliance Status - Enhanced with GDPR Article Details */}
+                {analyzeResult.risk_assessment.compliance_risks && (
+                  <div className="bg-white rounded-xl border-2 border-slate-200 p-6 shadow-lg">
+                    <div className="flex items-center gap-2 mb-6">
+                      <span className="text-2xl">📋</span>
+                      <h3 className="text-lg font-bold text-slate-800">
+                        Regulatory Compliance Status
+                      </h3>
+                    </div>
+
+                    <div className="space-y-4">
+                      {Object.entries(
+                        analyzeResult.risk_assessment.compliance_risks,
+                      )
+                        .filter(([key]) =>
+                          ["gdpr", "ccpa", "hipaa", "ecoa"].includes(key),
+                        )
+                        .map(([regulation, data]: [string, any]) => {
+                          if (!data || typeof data !== "object") return null;
+
+                          const regulationInfo: Record<
+                            string,
+                            {
+                              name: string;
+                              description: string;
+                              keyArticles: string[];
+                            }
+                          > = {
+                            gdpr: {
+                              name: "GDPR (General Data Protection Regulation)",
+                              description:
+                                "EU regulation protecting personal data and privacy",
+                              keyArticles: [
+                                "Article 5 - Principles (lawfulness, fairness, transparency, purpose limitation, data minimization)",
+                                "Article 6 - Lawful basis for processing",
+                                "Article 7 - Conditions for consent",
+                                "Article 9 - Processing special categories of personal data",
+                                "Article 15-22 - Data subject rights (access, rectification, erasure, portability)",
+                                "Article 25 - Data protection by design and by default",
+                                "Article 32 - Security of processing",
+                                "Article 35 - Data protection impact assessment",
+                              ],
+                            },
+                            ccpa: {
+                              name: "CCPA (California Consumer Privacy Act)",
+                              description:
+                                "California law providing privacy rights to consumers",
+                              keyArticles: [
+                                "Right to Know what personal information is collected",
+                                "Right to Delete personal information",
+                                "Right to Opt-Out of sale of personal information",
+                                "Right to Non-Discrimination for exercising CCPA rights",
+                                "Notice at Collection requirements",
+                              ],
+                            },
+                            hipaa: {
+                              name: "HIPAA (Health Insurance Portability and Accountability Act)",
+                              description:
+                                "US regulation protecting health information",
+                              keyArticles: [
+                                "Privacy Rule - Protected Health Information (PHI) safeguards",
+                                "Security Rule - Administrative, physical, technical safeguards",
+                                "Breach Notification Rule - Incident reporting requirements",
+                                "Minimum Necessary Standard - Access limitation",
+                              ],
+                            },
+                            ecoa: {
+                              name: "ECOA (Equal Credit Opportunity Act)",
+                              description:
+                                "US law prohibiting discrimination in credit decisions",
+                              keyArticles: [
+                                "Prohibition of discrimination based on protected characteristics",
+                                "Adverse action notice requirements",
+                                "Record retention requirements",
+                                "Monitoring and reporting obligations",
+                              ],
+                            },
+                          };
+
+                          const info = regulationInfo[regulation] || {
+                            name: regulation.toUpperCase(),
+                            description: "",
+                            keyArticles: [],
+                          };
+
+                          return (
+                            <div
+                              key={regulation}
+                              className={`rounded-xl border-2 overflow-hidden ${
+                                data.status === "COMPLIANT"
+                                  ? "border-green-300 bg-gradient-to-br from-green-50 to-emerald-50"
+                                  : data.status === "PARTIAL"
+                                    ? "border-yellow-300 bg-gradient-to-br from-yellow-50 to-orange-50"
+                                    : data.status === "NOT_APPLICABLE"
+                                      ? "border-slate-300 bg-gradient-to-br from-slate-50 to-slate-100"
+                                      : "border-red-300 bg-gradient-to-br from-red-50 to-rose-50"
+                              }`}
+                            >
+                              {/* Header */}
+                              <div
+                                className={`p-4 border-b-2 ${
+                                  data.status === "COMPLIANT"
+                                    ? "bg-green-100 border-green-200"
+                                    : data.status === "PARTIAL"
+                                      ? "bg-yellow-100 border-yellow-200"
+                                      : data.status === "NOT_APPLICABLE"
+                                        ? "bg-slate-100 border-slate-200"
+                                        : "bg-red-100 border-red-200"
+                                }`}
+                              >
+                                <div className="flex items-center justify-between">
+                                  <div>
+                                    <div className="text-sm font-black text-slate-800 uppercase tracking-wide">
+                                      {info.name}
+                                    </div>
+                                    {info.description && (
+                                      <div className="text-xs text-slate-600 mt-1">
+                                        {info.description}
+                                      </div>
+                                    )}
+                                  </div>
+                                  <span
+                                    className={`px-4 py-2 rounded-full text-xs font-black shadow-sm ${
+                                      data.status === "COMPLIANT"
+                                        ? "bg-green-600 text-white"
+                                        : data.status === "PARTIAL"
+                                          ? "bg-yellow-600 text-white"
+                                          : data.status === "NOT_APPLICABLE"
+                                            ? "bg-slate-600 text-white"
+                                            : "bg-red-600 text-white"
+                                    }`}
+                                  >
+                                    {data.status === "NOT_APPLICABLE"
+                                      ? "N/A"
+                                      : data.status}
+                                  </span>
+                                </div>
+                              </div>
+
+                              {/* Content */}
+                              <div className="p-4">
+                                {data.applicable === false ? (
+                                  <div className="text-sm text-slate-600 italic">
+                                    This regulation does not appear to apply to
+                                    your dataset based on detected data types.
+                                  </div>
+                                ) : (
+                                  <div className="space-y-3">
+                                    {/* Score */}
+                                    {data.score !== undefined && (
+                                      <div className="flex items-center gap-3">
+                                        <div className="text-xs font-semibold text-slate-600">
+                                          Compliance Score:
+                                        </div>
+                                        <div className="flex-1 h-3 bg-slate-200 rounded-full overflow-hidden">
+                                          <div
+                                            className={`h-full transition-all ${
+                                              data.score > 0.7
+                                                ? "bg-green-500"
+                                                : data.score > 0.4
+                                                  ? "bg-yellow-500"
+                                                  : "bg-red-500"
+                                            }`}
+                                            style={{
+                                              width: `${data.score * 100}%`,
+                                            }}
+                                          ></div>
+                                        </div>
+                                        <div className="text-sm font-bold text-slate-800">
+                                          {(data.score * 100).toFixed(0)}%
+                                        </div>
+                                      </div>
+                                    )}
+
+                                    {/* Compliant Checks */}
+                                    {data.compliant_checks &&
+                                      data.compliant_checks.length > 0 && (
+                                        <div>
+                                          <div className="text-xs font-semibold text-green-700 mb-2">
+                                            ✓ Compliant Areas:
+                                          </div>
+                                          <div className="flex flex-wrap gap-2">
+                                            {data.compliant_checks.map(
+                                              (check: string, idx: number) => (
+                                                <span
+                                                  key={idx}
+                                                  className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded border border-green-200"
+                                                >
+                                                  {check.replace(/_/g, " ")}
+                                                </span>
+                                              ),
+                                            )}
+                                          </div>
+                                        </div>
+                                      )}
+
+                                    {/* Non-Compliant Checks */}
+                                    {data.non_compliant_checks &&
+                                      data.non_compliant_checks.length > 0 && (
+                                        <div>
+                                          <div className="text-xs font-semibold text-red-700 mb-2">
+                                            ⚠️ Non-Compliant Areas:
+                                          </div>
+                                          <div className="flex flex-wrap gap-2">
+                                            {data.non_compliant_checks.map(
+                                              (check: string, idx: number) => (
+                                                <span
+                                                  key={idx}
+                                                  className="px-2 py-1 bg-red-100 text-red-800 text-xs rounded border border-red-200"
+                                                >
+                                                  {check.replace(/_/g, " ")}
+                                                </span>
+                                              ),
+                                            )}
+                                          </div>
+                                        </div>
+                                      )}
+
+                                    {/* Key Articles/Requirements */}
+                                    {info.keyArticles.length > 0 && (
+                                      <details className="mt-3">
+                                        <summary className="text-xs font-semibold text-blue-700 cursor-pointer hover:text-blue-900">
+                                          📖 View Key Requirements & Articles
+                                        </summary>
+                                        <div className="mt-2 pl-4 space-y-2">
+                                          {info.keyArticles.map(
+                                            (article, idx) => (
+                                              <div
+                                                key={idx}
+                                                className="flex items-start gap-2"
+                                              >
+                                                <span className="text-blue-600 text-xs mt-0.5">
+                                                  •
+                                                </span>
+                                                <span className="text-xs text-slate-700">
+                                                  {article}
+                                                </span>
+                                              </div>
+                                            ),
+                                          )}
+                                        </div>
+                                      </details>
+                                    )}
+
+                                    {/* Bias Score for ECOA */}
+                                    {regulation === "ecoa" &&
+                                      data.bias_score !== undefined && (
+                                        <div className="mt-3 p-3 bg-white rounded border border-slate-200">
+                                          <div className="text-xs font-semibold text-slate-600 mb-1">
+                                            Bias Score (Discrimination Risk):
+                                          </div>
+                                          <div className="flex items-center gap-3">
+                                            <div className="flex-1 h-3 bg-slate-200 rounded-full overflow-hidden">
+                                              <div
+                                                className={`h-full transition-all ${
+                                                  data.bias_score < 0.3
+                                                    ? "bg-green-500"
+                                                    : data.bias_score < 0.5
+                                                      ? "bg-yellow-500"
+                                                      : "bg-red-500"
+                                                }`}
+                                                style={{
+                                                  width: `${data.bias_score * 100}%`,
+                                                }}
+                                              ></div>
+                                            </div>
+                                            <div
+                                              className={`text-sm font-bold ${
+                                                data.bias_score < 0.3
+                                                  ? "text-green-600"
+                                                  : data.bias_score < 0.5
+                                                    ? "text-yellow-600"
+                                                    : "text-red-600"
+                                              }`}
+                                            >
+                                              {(data.bias_score * 100).toFixed(
+                                                1,
+                                              )}
+                                              %
+                                            </div>
+                                          </div>
+                                          <div className="text-xs text-slate-600 mt-1">
+                                            {data.bias_score < 0.3
+                                              ? "Low discrimination risk"
+                                              : data.bias_score < 0.5
+                                                ? "Moderate discrimination risk - monitor closely"
+                                                : "High discrimination risk - immediate remediation required"}
+                                          </div>
+                                        </div>
+                                      )}
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          );
+                        })}
+                    </div>
+
+                    {/* Compliance Recommendations */}
+                    {analyzeResult.risk_assessment.compliance_risks
+                      .recommendations &&
+                      analyzeResult.risk_assessment.compliance_risks
+                        .recommendations.length > 0 && (
+                        <div className="mt-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
+                          <div className="text-sm font-bold text-blue-900 mb-3">
+                            📌 Compliance Recommendations
+                          </div>
+                          <div className="space-y-2">
+                            {analyzeResult.risk_assessment.compliance_risks.recommendations.map(
+                              (rec: any, idx: number) => (
+                                <div
+                                  key={idx}
+                                  className="flex items-start gap-3 p-3 bg-white rounded border border-blue-200"
+                                >
+                                  <span
+                                    className={`px-2 py-0.5 text-xs font-bold rounded ${
+                                      rec.priority === "CRITICAL"
+                                        ? "bg-red-600 text-white"
+                                        : rec.priority === "HIGH"
+                                          ? "bg-orange-600 text-white"
+                                          : rec.priority === "MEDIUM"
+                                            ? "bg-yellow-600 text-white"
+                                            : "bg-blue-600 text-white"
+                                    }`}
+                                  >
+                                    {rec.priority}
+                                  </span>
+                                  <div className="flex-1">
+                                    <div className="text-sm font-semibold text-slate-800">
+                                      {rec.recommendation}
+                                    </div>
+                                    {rec.rationale && (
+                                      <div className="text-xs text-slate-600 mt-1">
+                                        {rec.rationale}
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+                              ),
+                            )}
+                          </div>
+                        </div>
+                      )}
+                  </div>
+                )}
+              </div>
+            ) : (
+              <div className="text-center py-12 bg-slate-50 rounded-xl border-2 border-dashed border-slate-300">
+                <span className="text-4xl mb-3 block">🔒</span>
+                <p className="text-slate-600 mb-2">
+                  No risk analysis results yet
+                </p>
+                <p className="text-sm text-slate-500">
+                  Upload a dataset and click "Analyze" to see comprehensive risk
+                  assessment
+                </p>
+              </div>
+            )}
+          </div>
+        );
+      case "bias-risk-mitigation":
+        return (
+          <div className="space-y-6">
+            <div>
+              <h2 className="text-2xl font-bold mb-2">
+                PII Detection & Anonymization Strategy
+              </h2>
+              <p className="text-sm text-slate-600">
+                Review detected risky features and choose how to anonymize them
+              </p>
+            </div>
+
+            {piiDetectionResult ? (
+              <div className="space-y-6">
+                {/* File Info Banner */}
+                <div className="p-3 bg-slate-100 border border-slate-300 rounded-lg text-sm">
+                  <div className="flex items-center gap-3">
+                    <span className="font-semibold text-slate-700">File:</span>
+                    <code className="px-2 py-1 bg-white rounded border border-slate-200">
+                      {piiDetectionResult.filename}
+                    </code>
+                    <span className="px-2 py-0.5 bg-blue-100 text-blue-800 text-xs font-semibold rounded">
+                      {piiDetectionResult.file_type.toUpperCase()}
+                    </span>
+                    <span className="text-slate-600">
+                      {piiDetectionResult.dataset_info.rows} rows ×{" "}
+                      {piiDetectionResult.dataset_info.columns} columns
+                    </span>
+                  </div>
+                </div>
+
+                {/* Summary Card */}
+                <div className="p-6 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl border-2 border-blue-200">
+                  <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                    <div>
+                      <div className="text-xs font-semibold text-blue-700 mb-1">
+                        TOTAL COLUMNS SCANNED
+                      </div>
+                      <div className="text-3xl font-bold text-blue-900">
+                        {piiDetectionResult.summary.total_columns_scanned}
+                      </div>
+                    </div>
+                    <div>
+                      <div className="text-xs font-semibold text-red-700 mb-1">
+                        HIGH RISK
+                      </div>
+                      <div className="text-3xl font-bold text-red-900">
+                        {piiDetectionResult.summary.high_risk_count}
+                      </div>
+                      <div className="text-xs text-slate-600">Must remove</div>
+                    </div>
+                    <div>
+                      <div className="text-xs font-semibold text-orange-700 mb-1">
+                        MEDIUM RISK
+                      </div>
+                      <div className="text-3xl font-bold text-orange-900">
+                        {piiDetectionResult.summary.medium_risk_count}
+                      </div>
+                      <div className="text-xs text-slate-600">
+                        Hash recommended
+                      </div>
+                    </div>
+                    <div>
+                      <div className="text-xs font-semibold text-yellow-700 mb-1">
+                        LOW RISK
+                      </div>
+                      <div className="text-3xl font-bold text-yellow-900">
+                        {piiDetectionResult.summary.low_risk_count}
+                      </div>
+                      <div className="text-xs text-slate-600">
+                        Mask/generalize
+                      </div>
+                    </div>
+                  </div>
+                  <div className="mt-4 p-3 bg-white/70 rounded-lg text-sm text-slate-700">
+                    {piiDetectionResult.message}
+                  </div>
+                </div>
+
+                {/* Risky Features List */}
+                <div className="space-y-3">
+                  {piiDetectionResult.risky_features.map((feature, idx) => {
+                    const riskColor =
+                      feature.risk_level === "HIGH"
+                        ? "red"
+                        : feature.risk_level === "MEDIUM"
+                          ? "orange"
+                          : feature.risk_level === "LOW"
+                            ? "yellow"
+                            : "gray";
+
+                    const bgColor =
+                      feature.risk_level === "HIGH"
+                        ? "bg-red-50 border-red-300"
+                        : feature.risk_level === "MEDIUM"
+                          ? "bg-orange-50 border-orange-300"
+                          : feature.risk_level === "LOW"
+                            ? "bg-yellow-50 border-yellow-300"
+                            : "bg-gray-50 border-gray-300";
+
+                    return (
+                      <div
+                        key={idx}
+                        className={`p-5 rounded-xl border-2 ${bgColor}`}
+                      >
+                        {/* Header */}
+                        <div className="flex items-start justify-between mb-3">
+                          <div className="flex-1">
+                            <div className="flex items-center gap-3 mb-2">
+                              <span
+                                className={`px-3 py-1 bg-${riskColor}-600 text-white text-xs font-bold rounded-full`}
+                              >
+                                {feature.risk_level} RISK
+                              </span>
+                              <span className="font-mono font-bold text-lg text-slate-800">
+                                {feature.column}
+                              </span>
+                            </div>
+                            <div className="text-sm text-slate-700">
+                              <span className="font-semibold">Detected:</span>{" "}
+                              {feature.entity_type}
+                              <span className="mx-2">•</span>
+                              <span className="font-semibold">
+                                Confidence:
+                              </span>{" "}
+                              {(feature.confidence * 100).toFixed(1)}%
+                              <span className="mx-2">•</span>
+                              <span className="font-semibold">
+                                Occurrences:
+                              </span>{" "}
+                              {feature.detection_count}
+                            </div>
+                          </div>
+                        </div>
+
+                        {/* Explanation */}
+                        <div className="p-4 bg-white rounded-lg mb-4">
+                          <div className="text-xs font-semibold text-slate-600 mb-2">
+                            WHY IS THIS RISKY?
+                          </div>
+                          <p className="text-sm text-slate-700 leading-relaxed">
+                            {feature.explanation}
+                          </p>
+                          <div className="mt-3 text-xs text-slate-600">
+                            <strong>GDPR Reference:</strong>{" "}
+                            {feature.gdpr_article}
+                          </div>
+                        </div>
+
+                        {/* Sample Values */}
+                        {feature.sample_values.length > 0 && (
+                          <div className="p-4 bg-white rounded-lg mb-4">
+                            <div className="text-xs font-semibold text-slate-600 mb-2">
+                              SAMPLE VALUES
+                            </div>
+                            <div className="flex gap-2 flex-wrap">
+                              {feature.sample_values.map((val, i) => (
+                                <code
+                                  key={i}
+                                  className="px-2 py-1 bg-slate-100 rounded text-xs text-slate-800 border border-slate-200"
+                                >
+                                  {val}
+                                </code>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Recommended Strategy */}
+                        <div className="p-4 bg-white rounded-lg border-2 border-green-300">
+                          <div className="flex items-start gap-3">
+                            <div className="flex-1">
+                              <div className="text-xs font-semibold text-green-700 mb-1">
+                                ✓ RECOMMENDED STRATEGY
+                              </div>
+                              <div className="font-bold text-lg text-slate-900">
+                                {feature.recommended_strategy}
+                              </div>
+                              <div className="text-sm text-slate-700 mt-1">
+                                {feature.strategy_description}
+                              </div>
+                              <div className="mt-2 flex gap-4 text-xs text-slate-600">
+                                <div>
+                                  <strong>Reversible:</strong>{" "}
+                                  {feature.reversible ? "Yes" : "No"}
+                                </div>
+                                <div>
+                                  <strong>Use Cases:</strong>{" "}
+                                  {feature.use_cases.join(", ")}
+                                </div>
+                              </div>
+                            </div>
+                            <button
+                              className="px-4 py-2 bg-green-600 text-white text-sm font-semibold rounded-lg hover:bg-green-500"
+                              onClick={() =>
+                                alert(
+                                  `Apply ${feature.recommended_strategy} to ${feature.column}`,
+                                )
+                              }
+                            >
+                              Apply
+                            </button>
+                          </div>
+                        </div>
+
+                        {/* Alternative Strategies */}
+                        <details className="mt-3">
+                          <summary className="text-xs font-semibold text-slate-600 cursor-pointer hover:text-slate-800">
+                            View Alternative Strategies
+                          </summary>
+                          <div className="mt-2 grid grid-cols-1 md:grid-cols-2 gap-2">
+                            {Object.entries(
+                              piiDetectionResult.available_strategies,
+                            )
+                              .filter(
+                                ([strategy]) =>
+                                  strategy !== feature.recommended_strategy,
+                              )
+                              .map(([strategy, details]: [string, any]) => (
+                                <div
+                                  key={strategy}
+                                  className="p-3 bg-white rounded border border-slate-200 hover:border-slate-400"
+                                >
+                                  <div className="font-semibold text-sm text-slate-800">
+                                    {strategy}
+                                  </div>
+                                  <div className="text-xs text-slate-600 mt-1">
+                                    {details.description}
+                                  </div>
+                                  <div className="mt-2 flex items-center justify-between">
+                                    <span
+                                      className={`px-2 py-0.5 text-xs rounded ${
+                                        details.risk_level === "HIGH"
+                                          ? "bg-red-100 text-red-800"
+                                          : details.risk_level === "MEDIUM"
+                                            ? "bg-orange-100 text-orange-800"
+                                            : "bg-yellow-100 text-yellow-800"
+                                      }`}
+                                    >
+                                      {details.risk_level} Risk
+                                    </span>
+                                    <button
+                                      className="px-2 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-500"
+                                      onClick={() =>
+                                        alert(
+                                          `Apply ${strategy} to ${feature.column}`,
+                                        )
+                                      }
+                                    >
+                                      Use This
+                                    </button>
+                                  </div>
+                                </div>
+                              ))}
+                          </div>
+                        </details>
+                      </div>
+                    );
+                  })}
+                </div>
+
+                {/* Apply All Button */}
+                <div className="sticky bottom-0 p-4 bg-gradient-to-t from-white via-white to-transparent">
+                  <button
+                    className="w-full py-3 bg-green-600 text-white font-bold rounded-lg hover:bg-green-500 shadow-lg"
+                    onClick={() =>
+                      alert(
+                        "Apply all recommended strategies and clean dataset",
+                      )
+                    }
+                  >
+                    ✓ Apply All Recommended Strategies & Clean Dataset
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <div className="text-center py-12">
+                <div className="text-6xl mb-4">🔍</div>
+                <p className="text-slate-600 mb-2">
+                  No PII detection results yet
+                </p>
+                <p className="text-sm text-slate-500">
+                  Upload a dataset and click "🔍 Detect PII" to scan for risky
+                  features
+                </p>
+              </div>
+            )}
+          </div>
+        );
+      case "results":
+        return (
+          <div className="space-y-4">
+            <h2 className="text-xl font-semibold">Results Summary</h2>
+            {analyzeResult || cleanResult ? (
+              <div className="space-y-4">
+                {analyzeResult && (
+                  <div className="p-4 bg-white rounded-lg border">
+                    <h3 className="font-semibold mb-2">Analysis Results</h3>
+                    <div className="text-sm space-y-1">
+                      <div>Dataset: {analyzeResult.filename}</div>
+                      <div>Rows: {analyzeResult.dataset_info.rows}</div>
+                      <div>Columns: {analyzeResult.dataset_info.columns}</div>
+                      <div>
+                        Bias Score:{" "}
+                        {(
+                          analyzeResult.bias_metrics.overall_bias_score * 100
+                        ).toFixed(1)}
+                        %
+                      </div>
+                      <div>
+                        Risk Score:{" "}
+                        {(
+                          analyzeResult.risk_assessment.overall_risk_score * 100
+                        ).toFixed(1)}
+                        %
+                      </div>
+                    </div>
+                    <a
+                      href={getReportUrl(analyzeResult.report_file)}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="mt-3 inline-block text-sm text-brand-600 underline"
+                    >
+                      Download Full Report →
+                    </a>
+                  </div>
+                )}
+
+                {cleanResult && (
+                  <div className="p-4 bg-white rounded-lg border">
+                    <h3 className="font-semibold mb-2">Cleaning Results</h3>
+                    <div className="text-sm space-y-1">
+                      <div>
+                        Original: {cleanResult.dataset_info.original_rows} rows
+                        × {cleanResult.dataset_info.original_columns} cols
+                      </div>
+                      <div>
+                        Cleaned: {cleanResult.dataset_info.cleaned_rows} rows ×{" "}
+                        {cleanResult.dataset_info.cleaned_columns} cols
+                      </div>
+                      <div>
+                        Cells Anonymized:{" "}
+                        {cleanResult.summary.total_cells_affected}
+                      </div>
+                      <div>
+                        Columns Removed:{" "}
+                        {cleanResult.summary.columns_removed.length}
+                      </div>
+                      <div>
+                        GDPR Compliant: {cleanResult.gdpr_compliance.length}{" "}
+                        articles applied
+                      </div>
+                    </div>
+                    <div className="mt-3 flex gap-2">
+                      <a
+                        href={getReportUrl(cleanResult.files.cleaned_csv)}
+                        download
+                        className="text-sm text-brand-600 underline"
+                      >
+                        Download Cleaned CSV →
+                      </a>
+                      <a
+                        href={getReportUrl(cleanResult.files.audit_report)}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-sm text-brand-600 underline"
+                      >
+                        View Audit Report →
+                      </a>
+                    </div>
+                  </div>
+                )}
+              </div>
+            ) : (
+              <p className="text-sm text-slate-600">
+                Process a dataset to see aggregated results.
+              </p>
+            )}
+          </div>
+        );
+      default:
+        return null;
+    }
+  }
+
+  return (
+    <div className="h-full overflow-y-auto p-6 bg-white/60">
+      {renderTabContent()}
+    </div>
+  );
+}