frontend/src/components/Dashboard.jsx

import { RefreshCw, CheckCircle, XCircle, BrainCircuit, ShieldCheck, TrendingDown, Target, Lightbulb } from 'lucide-react';
import ReactMarkdown from 'react-markdown';
import { DTIGauge, FeatureImportanceBar, ComparisonRadar } from './Charts';

export default function Dashboard({ result, onReset }) {
  const isApproved = result.prediction === 'Y';
  
  // Parse structured AI points
  const explanationPoints = result.explanation_text 
    ? result.explanation_text.split('@@POINT@@').filter(p => p.trim() !== '')
    : [];

  return (
    <div className="animate-in">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
        <div className={`status-badge ${isApproved ? 'status-approved' : 'status-rejected'}`}>
          {isApproved ? <CheckCircle size={24} /> : <XCircle size={24} />}
          {isApproved ? 'Application Approved' : 'Action Required: Rejection'}
        </div>
        <button onClick={onReset} className="btn" style={{ background: 'white', color: 'var(--text-main)', border: '1px solid var(--border-color)', boxShadow: 'none' }}>
          <RefreshCw size={16} /> New Assessment
        </button>
      </div>

      {/* Top Metric Grid */}
      <div className="metric-grid">
        <div className="metric-tile">
          <span className="metric-label">Approval Confidence</span>
          <span className="metric-value" style={{ color: isApproved ? 'var(--success)' : 'var(--danger)' }}>
            {(result.confidence * 100).toFixed(0)}%
          </span>
        </div>
        <div className="metric-tile">
          <span className="metric-label">DTI Ratio</span>
          <span className="metric-value">{result.dti_ratio.toFixed(1)}%</span>
        </div>
        <div className="metric-tile">
          <span className="metric-label">Credit Level</span>
          <span className="metric-value">{result.credit_history === 1 ? 'High' : 'At-Risk'}</span>
        </div>
      </div>

      <div className="glass-card" style={{ marginBottom: '2rem' }}>
        <h2 style={{ marginBottom: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.75rem', color: 'var(--primary)', fontWeight: '700' }}>
          <BrainCircuit size={28} />
          AI Advisor Narrative
        </h2>
        <p style={{ color: 'var(--text-muted)', marginBottom: '1.5rem', fontSize: '1rem' }}>
          Structured multi-point analysis from the Mistral Reasoning Engine.
        </p>
        
        <div className="narrative-grid">
          {explanationPoints.length > 0 ? (
            explanationPoints.map((point, index) => (
              <div key={index} className="narrative-sub-card">
                <div style={{ display: 'flex', gap: '1rem' }}>
                   <div style={{ color: 'var(--primary)', marginTop: '0.2rem' }}><Lightbulb size={20} /></div>
                   <div className="narrative-content">
                     <ReactMarkdown>{point.trim()}</ReactMarkdown>
                   </div>
                </div>
              </div>
            ))
          ) : (
            <div className="narrative-sub-card" style={{ gridColumn: '1 / -1' }}>
              <p>{result.explanation_text || "Gathering advisor narrative..."}</p>
            </div>
          )}
        </div>
        
        {!isApproved && result.optimized_suggestion && (
          <div className="ai-advice-box">
            <h3><Target size={20} /> Actionable Path to Approval</h3>
            <p style={{ fontSize: '1.1rem', color: '#4b5563' }}>{result.optimized_suggestion}</p>
          </div>
        )}
      </div>

      <div className="dashboard-layout">
        <div className="glass-card">
          <h3 style={{ marginBottom: '2rem', display: 'flex', alignItems: 'center', gap: '0.5rem', borderBottom: '1px solid var(--border-color)', paddingBottom: '1rem' }}>
            <ShieldCheck size={20} color="var(--success)" />
            Peer Comparison Radar
          </h3>
          <div style={{ height: '300px' }}>
            <ComparisonRadar userResults={result} />
          </div>
        </div>

        <div className="glass-card">
          <h3 style={{ marginBottom: '2rem', display: 'flex', alignItems: 'center', gap: '0.5rem', borderBottom: '1px solid var(--border-color)', paddingBottom: '1rem' }}>
            <TrendingDown size={20} color="var(--primary)" />
            Impact Vector Analysis
          </h3>
          <FeatureImportanceBar featuresJson={result.feature_importance_json} />
        </div>
      </div>
      
      <div style={{ textAlign: 'center', marginTop: '3rem', opacity: 0.6 }}>
         <DTIGauge dti={result.dti_ratio} />
      </div>
    </div>
  );
}