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

const SCREENS = [
  { id: 'status', label: 'System Status', icon: <Monitor size={20} />, to: '/status', desc: 'Live health and workflow queue' },
  { id: 'signals', label: 'Regulatory Signals', icon: <Eye size={20} />, to: '/signals', desc: 'AI-detected regulatory changes' },
  { id: 'documents', label: 'Document Management', icon: <FileText size={20} />, to: '/documents', desc: 'Upload and inspect documents' },
  { id: 'compliance', label: 'Compliance Analysis', icon: <Shield size={20} />, to: '/compliance', desc: 'Three-column compliance workspace' },
  { id: 'chat', label: 'Regulation Q&A', icon: <MessageSquare size={20} />, to: '/chat', desc: 'Chat with cited regulation sources' },
  { id: 'analytics', label: 'Analytics', icon: <BarChart2 size={20} />, to: '/status', desc: 'KPIs and coverage metrics' },
];

const STEPS = [
  { num: '01', label: 'Upload', desc: 'Ingest regulation documents' },
  { num: '02', label: 'Process', desc: 'Embed and chunk via vector DB' },
  { num: '03', label: 'Monitor', desc: 'Watch regulatory signal feed' },
  { num: '04', label: 'Analyze', desc: 'Run compliance gap analysis' },
  { num: '05', label: 'Review', desc: 'Inspect findings with AI assist' },
  { num: '06', label: 'Chat', desc: 'Ask questions with cited answers' },
];

export function OverviewPage() {
  const navigate = useNavigate();
  return (
    <div className="overview-page">
      <section className="overview-hero">
        <p className="hero-eyebrow">T-Systems · AI Regulation Hub</p>
        <h1 className="hero-title">AI Compliance,<br />Automated end-to-end</h1>
        <p className="hero-desc">
          Monitor global AI regulations, analyze document compliance gaps,
          and get cited answers — all in one platform.
        </p>
        <div className="hero-actions">
          <button className="btn primary" onClick={() => navigate('/status')}>
            Open dashboard <ArrowRight size={14} />
          </button>
          <button className="btn" onClick={() => navigate('/chat')}>
            Jump to regulation chat
          </button>
        </div>
      </section>

      <div className="overview-summary card">
        <div className="summary-item">
          <span className="summary-num">6</span>
          <span className="summary-label">Screens</span>
        </div>
        <div className="summary-divider" />
        <div className="summary-item">
          <span className="summary-num">5</span>
          <span className="summary-label">Backend-aware flows</span>
        </div>
        <div className="summary-divider" />
        <div className="summary-item">
          <span className="summary-num">AI</span>
          <span className="summary-label">Review posture</span>
        </div>
      </div>

      <section className="overview-workflow">
        <h2 className="section-title">How it works</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">Screens</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>
  );
}