import { Link } from 'react-router-dom';
import NeonCard from '../components/NeonCard/NeonCard';
import {
  CHEAT_SECTIONS,
  PIPELINE_STEPS,
  TROUBLESHOOTING,
} from '../help/cheatSheetContent';
import {
  ForgeCalibrateCompare,
  PipelineFlow,
  RoadmapGrid,
} from '../components/Visual/VisualComponents';
import './Pages.css';

export default function GuidePage() {
  return (
    <div className="page fade-in command-deck">
      <header className="deck-hero">
        <div className="deck-hero-text">
          <p className="deck-eyebrow font-tech">OPERATIONS MANUAL</p>
          <h1>Field Guide</h1>
          <p className="page-subtitle">
            Visual cheat sheet — what each page does, how the pipeline works, and what to fix when things break.
          </p>
        </div>
      </header>

      <NeonCard accent="cyan" className="section" hud>
        <h2 className="section-title font-display">
          <span className="section-ornament">◆</span> Live pipeline
          <span className="section-line" />
        </h2>
        <PipelineFlow />
      </NeonCard>

      <section className="section">
        <h2 className="section-title font-display">
          <span className="section-ornament">◆</span> Forge vs Calibrate
          <span className="section-line" />
        </h2>
        <ForgeCalibrateCompare />
      </section>

      {CHEAT_SECTIONS.filter((s) => s.steps && s.id !== 'pipeline').map((section) => (
        <section key={section.id} className="section">
          <h2 className="section-title font-display">
            <span className="section-ornament">◆</span> {section.title}
            <span className="section-line" />
          </h2>
          <p className="form-hint">{section.description}</p>
          {section.steps?.map((step) => (
            <div key={step.id} className="guide-step-card">
              <div className="guide-step-num">{step.icon}</div>
              <div className="guide-step-body">
                <h4>{step.title} — {step.subtitle}</h4>
                <p>{step.body}</p>
                {step.tips && (
                  <ul className="guide-tips">
                    {step.tips.map((t) => (
                      <li key={t}>{t}</li>
                    ))}
                  </ul>
                )}
              </div>
              {step.route && (
                <Link to={step.route} className="btn btn-outline btn-sm">
                  {step.routeLabel || 'Open'}
                </Link>
              )}
            </div>
          ))}
        </section>
      ))}

      <section className="section">
        <h2 className="section-title font-display">
          <span className="section-ornament">◆</span> Step-by-step (detailed)
          <span className="section-line" />
        </h2>
        {PIPELINE_STEPS.map((step) => (
          <div key={step.id} className="guide-step-card">
            <div className="guide-step-num">{step.icon}</div>
            <div className="guide-step-body">
              <h4>{step.title} — {step.subtitle}</h4>
              <p>{step.body}</p>
              {step.tips && (
                <ul className="guide-tips">
                  {step.tips.map((t) => (
                    <li key={t}>{t}</li>
                  ))}
                </ul>
              )}
            </div>
            {step.route && (
              <Link to={step.route} className="btn btn-primary btn-sm">
                {step.routeLabel}
              </Link>
            )}
          </div>
        ))}
      </section>

      <section className="section">
        <h2 className="section-title font-display">
          <span className="section-ornament">◆</span> Troubleshooting
          <span className="section-line" />
        </h2>
        <NeonCard accent="amber">
          {TROUBLESHOOTING.map((t) => (
            <div key={t.problem} className="trouble-card">
              <strong>{t.problem}</strong>
              <span>{t.fix}</span>
            </div>
          ))}
        </NeonCard>
      </section>

      <section className="section">
        <h2 className="section-title font-display">
          <span className="section-ornament">◆</span> Product roadmap
          <span className="section-line" />
        </h2>
        <p className="form-hint" style={{ marginBottom: '1rem' }}>
          Shipped capabilities (high/medium) and remaining low-priority ideas.
        </p>
        <RoadmapGrid />
      </section>
      <footer style={{ marginTop: '3rem', paddingTop: '1rem', borderTop: '1px solid #333', textAlign: 'center', color: '#ff4444', fontSize: '0.85rem', fontFamily: 'monospace' }}>
        ⚠️ DISCLAIMER: Use only on personal machines on your own network. Anything else is a crime.
      </footer>
    </div>
  );
}
