import { Button } from "@/components/ui/button"
import { ArrowLeft, FileText, Activity, Heart, ShieldCheck, LucideIcon, Share2, Bookmark } from "lucide-react"
import Link from "next/link"
import { fetchApi } from "@/lib/api-client"

const ICON_MAP: Record<string, LucideIcon> = {
  FileText,
  Activity,
  Heart,
  ShieldCheck,
}

interface Guide {
  id: number;
  title: string;
  description: string;
  content: string;
  icon: string;
  color: string;
}

export default async function GuideDetailPage({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  
  let guide: Guide | null = null

  try {
    guide = await fetchApi(`guides.php?id=${id}`)
  } catch (error) {
    console.error("Failed to fetch guide details:", error)
  }

  if (!guide || !guide.title) {
    return (
      <div className="container mx-auto px-4 py-20 text-center">
        <h1 className="text-3xl font-bold mb-4">Guide not found</h1>
        <p className="text-muted-foreground mb-8">We couldn't find the guide you're looking for. It might have been moved or removed.</p>
        <Button asChild>
          <Link href="/guides">Back to Guides</Link>
        </Button>
      </div>
    )
  }

  const Icon = ICON_MAP[guide.icon] || FileText

  return (
    <main className="flex-1 pb-20">
      <section className={`py-16 ${guide.color || 'bg-primary/5'}`}>
        <div className="container mx-auto px-4">
          <Button variant="ghost" className="mb-6 gap-2" asChild>
            <Link href="/guides">
              <ArrowLeft className="h-4 w-4" />
              Back to Guides
            </Link>
          </Button>
          <div className="flex flex-col md:flex-row items-center gap-6">
            <div className={`p-4 rounded-2xl bg-white shadow-xl ${guide.color || ''}`}>
              <Icon className="h-12 w-12" />
            </div>
            <div className="max-w-3xl">
              <h1 className="text-4xl font-extrabold tracking-tight mb-4">{guide.title}</h1>
              <p className="text-xl text-muted-foreground leading-relaxed">
                {guide.description}
              </p>
            </div>
          </div>
        </div>
      </section>

      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
          <article className="lg:col-span-8 space-y-8">
            <div className="flex items-center justify-between py-4 border-y">
              <div className="flex items-center gap-4">
                <Button variant="ghost" size="sm" className="gap-2">
                  <Share2 className="h-4 w-4" />
                  Share Guide
                </Button>
                <Button variant="ghost" size="sm" className="gap-2">
                  <Bookmark className="h-4 w-4" />
                  Save for Later
                </Button>
              </div>
            </div>

            <div className="prose prose-lg prose-slate max-w-none">
              <div className="space-y-6 leading-relaxed whitespace-pre-wrap">
                {guide.content || "Content coming soon..."}
              </div>
            </div>
          </article>

          <aside className="lg:col-span-4 space-y-8">
            <div className="p-6 rounded-2xl bg-muted/50 border space-y-6 sticky top-24">
              <h3 className="font-bold text-lg border-b pb-2">In this Guide</h3>
              <nav className="space-y-2">
                <p className="text-sm text-muted-foreground italic">
                  This guide provides comprehensive information about {(guide.title || 'this topic').toLowerCase()}. 
                  Follow the steps outlined to better manage your journey.
                </p>
              </nav>
              <div className="pt-4">
                <h4 className="font-bold text-sm uppercase tracking-wider text-muted-foreground mb-3">Resources</h4>
                <ul className="space-y-3">
                  <li className="flex items-center gap-2 text-sm font-medium hover:text-primary cursor-pointer transition-colors">
                    <FileText className="h-4 w-4" />
                    Printable PDF Checklist
                  </li>
                  <li className="flex items-center gap-2 text-sm font-medium hover:text-primary cursor-pointer transition-colors">
                    <FileText className="h-4 w-4" />
                    Doctor Discussion Guide
                  </li>
                </ul>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </main>
  )
}
