import { useParams, Link } from 'react-router-dom'
import { ChevronRight, ArrowLeft } from 'lucide-react'
import { guides } from '@/data/guides'
import { GuideSection } from '@/components/guides/GuideSection'

export default function GuideDetailPage() {
  const { slug } = useParams<{ slug: string }>()
  const guide = guides.find(g => g.slug === slug)

  if (!guide) {
    return (
      <div className="flex flex-col items-center justify-center h-full text-center p-6 overflow-y-auto">
        <h2 className="text-lg font-heading font-semibold text-foreground mb-2">Guide Not Found</h2>
        <p className="text-sm text-muted-foreground mb-4">The guide you're looking for doesn't exist.</p>
        <Link
          to="/guides"
          className="bg-primary text-white font-semibold text-sm rounded-lg px-5 py-2 hover:brightness-110 active:scale-[0.98] transition-all"
        >
          Back to Guides
        </Link>
      </div>
    )
  }

  const Icon = guide.icon

  return (
    <div className="overflow-y-auto h-full p-6 max-w-3xl mx-auto">
      {/* Breadcrumb */}
      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground mb-6">
        <Link to="/guides" className="hover:text-primary transition-colors">
          User Guides
        </Link>
        <ChevronRight size={12} />
        <span className="text-foreground">{guide.title}</span>
      </nav>

      {/* Header */}
      <div className="card-flat rounded-2xl p-6 mb-6">
        <div className="flex items-center gap-3 mb-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-accent-dim">
            <Icon size={20} className="text-primary" />
          </div>
          <div>
            <h1 className="text-xl font-heading font-bold text-foreground">{guide.title}</h1>
            <p className="text-sm text-muted-foreground">{guide.summary}</p>
          </div>
        </div>
        <div className="flex items-center gap-4 mt-4 pt-4 border-t" style={{ borderColor: 'var(--color-border-default)' }}>
          <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">
            {guide.sections.length} {guide.sections.length === 1 ? 'section' : 'sections'}
          </span>
          <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">
            {guide.sections.reduce((acc, s) => acc + s.steps.length, 0)} steps
          </span>
        </div>
      </div>

      {/* Sections */}
      <div className="card-flat rounded-2xl p-6">
        {guide.sections.map((section, i) => (
          <GuideSection key={i} section={section} index={i} />
        ))}
      </div>

      {/* Back link */}
      <div className="mt-6">
        <Link
          to="/guides"
          className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-primary transition-colors"
        >
          <ArrowLeft size={14} />
          Back to all guides
        </Link>
      </div>
    </div>
  )
}