import { useNavigate } from 'react-router-dom';
import { ArrowRight, BarChart2, Eye, FileText, Shield, MessageSquare, Monitor } from 'lucide-react';
import { useLanguage } from '../../contexts/LanguageContext';

export function OverviewPage() {
  const navigate = useNavigate();
  const { t } = useLanguage();

  const SCREENS = [
    { id: 'status', label: t.overview.screenStatus, icon: <Monitor size={20} />, to: '/status', desc: t.overview.screenStatusDesc },
    { id: 'signals', label: t.overview.screenSignals, icon: <Eye size={20} />, to: '/signals', desc: t.overview.screenSignalsDesc },
    { id: 'documents', label: t.overview.screenDocuments, icon: <FileText size={20} />, to: '/documents', desc: t.overview.screenDocumentsDesc },
    { id: 'compliance', label: t.overview.screenCompliance, icon: <Shield size={20} />, to: '/compliance', desc: t.overview.screenComplianceDesc },
    { id: 'chat', label: t.overview.screenChat, icon: <MessageSquare size={20} />, to: '/chat', desc: t.overview.screenChatDesc },
    { id: 'analytics', label: t.overview.screenAnalytics, icon: <BarChart2 size={20} />, to: '/status', desc: t.overview.screenAnalyticsDesc },
  ];

  const STEPS = [
    { num: '01', label: t.overview.stepUpload, desc: t.overview.stepUploadDesc },
    { num: '02', label: t.overview.stepProcess, desc: t.overview.stepProcessDesc },
    { num: '03', label: t.overview.stepMonitor, desc: t.overview.stepMonitorDesc },
    { num: '04', label: t.overview.stepAnalyze, desc: t.overview.stepAnalyzeDesc },
    { num: '05', label: t.overview.stepReview, desc: t.overview.stepReviewDesc },
    { num: '06', label: t.overview.stepChat, desc: t.overview.stepChatDesc },
  ];

  return (
    <div className="overview-scroll-wrapper">
      <div className="overview-page">
        <section className="overview-hero">
          <p className="hero-eyebrow">{t.overview.eyebrow}</p>
          <h1 className="hero-title">
            {t.overview.heroTitle.split('\n').map((line, i) => (
              <span key={i}>{line}{i === 0 && <br />}</span>
            ))}
          </h1>
          <p className="hero-desc">{t.overview.heroDesc}</p>
          <div className="hero-actions">
            <button className="btn primary" onClick={() => navigate('/status')}>
              {t.overview.openDashboard} <ArrowRight size={14} />
            </button>
            <button className="btn" onClick={() => navigate('/chat')}>
              {t.overview.jumpToChat}
            </button>
          </div>
        </section>

        <div className="overview-summary card">
          <div className="summary-item">
            <span className="summary-num">6</span>
            <span className="summary-label">{t.overview.statScreens}</span>
          </div>
          <div className="summary-divider" />
          <div className="summary-item">
            <span className="summary-num">5</span>
            <span className="summary-label">{t.overview.statFlows}</span>
          </div>
          <div className="summary-divider" />
          <div className="summary-item">
            <span className="summary-num">AI</span>
            <span className="summary-label">{t.overview.statReviewPosture}</span>
          </div>
        </div>

        <section className="overview-workflow">
          <h2 className="section-title">{t.overview.sectionHowItWorks}</h2>
          <div className="workflow-steps">
            {STEPS.map(s => (
              <div key={s.num} className="workflow-step">
                <div className="step-num">{s.num}</div>
                <div className="step-label">{s.label}</div>
                <div className="step-desc">{s.desc}</div>
              </div>
            ))}
          </div>
        </section>

        <section className="overview-screens">
          <h2 className="section-title">{t.overview.sectionScreens}</h2>
          <div className="screen-grid">
            {SCREENS.map(s => (
              <button key={s.id} className="screen-card card" onClick={() => navigate(s.to)}>
                <div className="screen-icon">{s.icon}</div>
                <div className="screen-label">{s.label}</div>
                <div className="screen-desc">{s.desc}</div>
              </button>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}
