import { useState } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import { HelpCircle, ShieldCheck, Cpu, Sparkles, Sliders, ArrowRight } from 'lucide-react';
import { useExperienceMode } from '@/lib/ExperienceMode';
import { Link } from 'react-router-dom';

export default function Help() {
  const [open, setOpen] = useState(false);
  const { mode } = useExperienceMode();
  const guided = mode === 'guided';

  const steps = guided
    ? [
      ['Create a design', 'From Home, tap New Design. Pick your cover, choose how you want to create (image, drawing, or idea), and we set up your workspace.'],
      ['Make it yours', 'Upload or generate artwork, place it on the cover, and choose an effect (Colour, Raised, Engraved). Cut-out and Sculpted need the Geometry Engine.'],
      ['Check my design', 'We check your design is ready. Real 3D geometry and printing checks are confirmed by the Geometry Engine.'],
      ['Submit for real 3D', 'When everything passes, submit for real 3D processing and export to SHiRE storage.']
    ]
    : [
      ['Cover → Input → Concept', 'Select a validated cover, choose an input method, optionally generate concepts.'],
      ['Artwork & geometry', 'Sketch-to-3D runs a genuine Canvas pixel pipeline; the Studio applies projection overlays (simulation).'],
      ['Validation', 'Preview checks separated from real geometry/safety checks; no preview means approved.'],
      ['Processing & export', 'Submit preview simulations or final processing (requires live engine + writable SHiREVault).']
    ];

  return (
    <>
      <button onClick={() => setOpen(true)} className="icon-button" title="Help" aria-label="Help"><HelpCircle size={16} /></button>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="max-w-lg border-white/10 bg-[#0d1117] text-slate-100">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2 font-heading text-lg text-white"><HelpCircle size={18} className="text-cyan-300" />How LimbForge works</DialogTitle>
            <DialogDescription className="text-slate-400">A quick tour of the design workflow.</DialogDescription>
          </DialogHeader>

          <div className="space-y-3">
            {steps.map(([t, d], i) => (
              <div key={t} className="flex gap-3 rounded-lg border border-white/[0.06] bg-black/20 p-3">
                <span className="grid h-7 w-7 shrink-0 place-items-center rounded-full border border-cyan-400/40 bg-cyan-400/10 text-xs font-semibold text-cyan-200">{i + 1}</span>
                <div><p className="text-sm font-semibold text-white">{t}</p><p className="mt-0.5 text-xs leading-5 text-slate-400">{d}</p></div>
              </div>
            ))}
          </div>

          <div className="mt-2 space-y-2 rounded-lg border border-violet-400/25 bg-violet-400/[0.07] p-3 text-xs text-violet-100">
            <p className="flex items-center gap-1.5 font-semibold text-violet-200"><ShieldCheck size={14} />Preview vs real geometry</p>
            <p className="leading-5">On-screen previews are simulations. The final printable shape, wall/mesh/clearance checks, and export are produced by the live LimbForge Geometry Engine and SHiRE storage — never by the browser.</p>
          </div>

          <div className="mt-2 flex flex-wrap gap-2">
            <Link to="/new-project" onClick={() => setOpen(false)} className="chip"><Sparkles size={13} />Start a design</Link>
            <Link to="/jobs" onClick={() => setOpen(false)} className="chip"><Cpu size={13} />Processing</Link>
            <Link to="/settings" onClick={() => setOpen(false)} className="chip"><Sliders size={13} />Settings & accessibility</Link>
          </div>

          <p className="mt-2 text-[11px] text-slate-500">Need more help? Contact Base44 support. <span className="inline-flex items-center gap-1 text-slate-400">Switch mode in Settings<ArrowRight size={11} /></span></p>
        </DialogContent>
      </Dialog>
    </>
  );
}