"use client"

import { useState } from "react"
import Link from "next/link"
import { ArrowLeft, FileText, Network } from "lucide-react"
import { Button } from "@/components/ui/button"

interface TopicPageClientProps {
  project: {
    projectName: string
    projectDescription: string
    _id: string
  }
  summaryUrl: string
  mindmapUrl: string
}

export default function TopicPageClient({ project, summaryUrl, mindmapUrl }: TopicPageClientProps) {
  const [activeView, setActiveView] = useState<"summary" | "mindmap">("summary")

  return (
    <main className="min-h-screen bg-background pt-6 pb-12">
      <div className="container mx-auto px-4 max-w-6xl">
        <div className="flex flex-col gap-4">
          <Link href="/trending" className="group flex items-center gap-2 text-xs font-bold text-muted-foreground hover:text-primary transition-all w-fit">
            <div className="w-7 h-7 rounded-full bg-muted flex items-center justify-center group-hover:bg-primary/10 transition-colors">
              <ArrowLeft className="w-3 h-3" />
            </div>
            Back to Examples
          </Link>

          <div className="bg-card border border-border rounded-xl shadow-xl overflow-hidden flex flex-col">
            {/* Unified Header Area - More Compact */}
            <div className="p-5 md:p-6 border-b border-border bg-gradient-to-br from-primary/[0.01] to-accent/[0.01]">
              <div className="max-w-4xl">
                {activeView === "summary" && (
                  <>
                    <div className="inline-flex items-center gap-2 px-2.5 py-0.5 rounded-full bg-primary/10 text-primary text-[10px] font-bold uppercase tracking-wider mb-3 border border-primary/10">
                      <Network className="h-2.5 w-2.5" />
                      Detailed Analysis
                    </div>
                    
                    <h1 className="text-xl md:text-2xl font-bold text-foreground mb-2 leading-tight tracking-tight">
                      {project.projectName}
                    </h1>
                    
                    <p className="text-xs md:text-sm text-muted-foreground mb-4 leading-relaxed max-w-3xl">
                      {project.projectDescription}
                    </p>
                  </>
                )}

                <div className="flex flex-wrap gap-3">
                  <Button 
                    type="button"
                    variant={activeView === "summary" ? "default" : "outline"}
                    size="sm" 
                    onClick={() => setActiveView("summary")}
                    aria-pressed={activeView === "summary"}
                    className="h-9 px-3.5 text-xs font-bold rounded-lg shadow-md shadow-primary/10 transition-all"
                  >
                    <FileText className="w-3.5 h-3.5 mr-2" />
                    View Summary
                  </Button>
                  <Button 
                    type="button"
                    variant={activeView === "mindmap" ? "default" : "outline"}
                    size="sm" 
                    onClick={() => setActiveView("mindmap")}
                    aria-pressed={activeView === "mindmap"}
                    className="h-9 px-3.5 text-xs font-bold rounded-lg shadow-md shadow-primary/10 transition-all"
                  >
                    <Network className="w-3.5 h-3.5 mr-2" />
                    Mind Map
                  </Button>
                </div>
              </div>
            </div>

            {/* Integrated Player Area */}
            <div className="w-full bg-slate-50/50 relative">
              {/* Subtle overlay for transition */}
              <div className="absolute top-0 inset-x-0 h-4 bg-gradient-to-b from-border/10 to-transparent pointer-events-none" />
              
              <iframe
                src={activeView === "summary" ? summaryUrl : mindmapUrl}
                style={{ width: "100%", height: "700px", border: "none" }}
                loading="lazy"
                title={`${activeView === "summary" ? "Summary" : "Mind Map"} view for ${project.projectName}`}
                allow="clipboard-write"
                referrerPolicy="strict-origin-when-cross-origin"
                className="w-full transition-opacity duration-300"
                key={activeView}
              />
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}