import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Sparkles, Send, CheckCircle2, MessageSquare, ThumbsUp, ThumbsDown } from "lucide-react"
import Link from "next/link"
import Image from "next/image"

export default function DPplayoutPage({ params }: { params: { dppId: string } }) {
  return (
    <div className="max-w-5xl mx-auto h-screen flex flex-col">
      <header className="h-16 border-b border-border bg-background flex items-center justify-between px-6 sticky top-0 z-10">
        <div className="flex items-center gap-4">
          <Link href="/dashboard" className="text-muted-foreground hover:text-foreground transition-colors p-2 hover:bg-secondary rounded-lg shrink-0">
            <ArrowLeft size={20} />
          </Link>
          <div className="flex items-center gap-3">
            <div className="relative h-14 w-56 hidden md:block shrink-0">
              <Image 
                src="/PragatiVeer_Logo/SVG_Logos/Rectangular_light_background.svg" 
                alt="PragatiVeer" 
                fill
                className="object-contain object-left scale-135 origin-left dark:hidden"
              />
              <Image 
                src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg" 
                alt="PragatiVeer" 
                fill
                className="object-contain object-left scale-135 origin-left hidden dark:block"
              />
            </div>
            <div className="h-5 w-px bg-border hidden md:block"></div>
            <Badge variant="outline" className="border-primary/20 text-primary bg-primary/5 uppercase tracking-widest text-[10px]">AI Review</Badge>
            <h1 className="font-semibold text-sm tracking-tight">Rotational Dynamics DPP #4</h1>
          </div>
        </div>
        <div className="flex items-center gap-3">
          <span className="text-sm font-medium text-muted-foreground bg-secondary px-3 py-1.5 rounded-lg">Score: <span className="text-emerald-500 font-bold ml-1">14/20</span></span>
        </div>
      </header>

      <main className="flex-1 overflow-y-auto p-6 md:p-10 space-y-10">
        <div className="bg-secondary/20 border border-border rounded-3xl p-6 md:p-10 shadow-sm">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-lg font-semibold flex items-center gap-2">
              <CheckCircle2 size={20} className="text-emerald-500" />
              Question 3
            </h2>
            <Badge variant="outline" className="bg-background text-muted-foreground border-border">Medium Difficulty</Badge>
          </div>
          <div className="prose prose-neutral dark:prose-invert max-w-none text-lg leading-relaxed mb-8">
            <p>
              Two identical solid spheres roll down two different inclined planes of the same height but different angles of inclination. 
              Which sphere reaches the bottom with greater speed?
            </p>
          </div>
          
          <div className="p-5 rounded-2xl border border-emerald-500/30 bg-emerald-500/5 flex items-center gap-4">
            <div className="size-8 rounded-full bg-emerald-500 text-primary-foreground flex items-center justify-center font-bold text-sm shadow-sm">C</div>
            <span className="font-medium text-foreground">They reach with the same speed.</span>
            <span className="ml-auto text-xs font-bold text-emerald-600 dark:text-emerald-400 uppercase tracking-wider bg-emerald-500/10 px-3 py-1 rounded-full">Your Answer</span>
          </div>
        </div>

        {/* AI Solution Breakdown */}
        <div className="space-y-8 bg-background p-6 md:p-10 rounded-3xl border border-border shadow-sm">
          <div className="flex items-center gap-3 border-b border-border pb-6">
            <div className="p-2.5 bg-primary text-primary-foreground rounded-xl shadow-sm">
              <Sparkles size={20} />
            </div>
            <h3 className="font-semibold text-xl tracking-tight">AI Step-by-Step Solution</h3>
          </div>

          <div className="ml-5 pl-8 border-l-2 border-border/50 space-y-10 py-4">
            <div className="relative">
              <div className="absolute -left-[41px] top-1 size-5 rounded-full bg-background border-4 border-primary ring-4 ring-background"></div>
              <h4 className="font-semibold text-base mb-2 text-foreground">Step 1: Energy Conservation</h4>
              <p className="text-muted-foreground text-base leading-relaxed">
                By the law of conservation of mechanical energy, the potential energy at the top is converted into translational and rotational kinetic energy at the bottom.
              </p>
              <div className="mt-4 p-5 rounded-2xl bg-secondary/50 font-mono text-sm overflow-x-auto text-foreground border border-border/50">
                mgh = ½mv² + ½Iω²
              </div>
            </div>

            <div className="relative">
              <div className="absolute -left-[41px] top-1 size-5 rounded-full bg-background border-4 border-muted ring-4 ring-background"></div>
              <h4 className="font-semibold text-base mb-2 text-foreground">Step 2: Moment of Inertia</h4>
              <p className="text-muted-foreground text-base leading-relaxed">
                For a solid sphere, the moment of inertia <span className="font-mono bg-secondary px-1.5 py-0.5 rounded-md text-foreground">I = ⅖mr²</span>. Substitute this and <span className="font-mono bg-secondary px-1.5 py-0.5 rounded-md text-foreground">ω = v/r</span> into the energy equation.
              </p>
              <div className="mt-4 p-5 rounded-2xl bg-secondary/50 font-mono text-sm overflow-x-auto text-foreground border border-border/50 leading-loose">
                mgh = ½mv² + ½(⅖mr²)(v²/r²) <br/>
                mgh = ½mv² + ⅕mv² <br/>
                gh = 7/10 v²
              </div>
            </div>

            <div className="relative">
              <div className="absolute -left-[41px] top-1 size-5 rounded-full bg-background border-4 border-muted ring-4 ring-background"></div>
              <h4 className="font-semibold text-base mb-2 text-foreground">Step 3: Final Velocity</h4>
              <p className="text-muted-foreground text-base leading-relaxed">
                Solving for <span className="font-mono bg-secondary px-1.5 py-0.5 rounded-md text-foreground">v</span>, we get:
              </p>
              <div className="mt-4 p-5 rounded-2xl bg-secondary/50 font-mono text-sm overflow-x-auto text-foreground border border-border/50">
                v = √(10gh/7)
              </div>
              <p className="text-muted-foreground text-base leading-relaxed mt-5 bg-secondary/20 p-4 rounded-xl border-l-2 border-primary">
                The final speed depends only on height <span className="font-mono bg-secondary px-1.5 py-0.5 rounded-md text-foreground">h</span> and acceleration due to gravity <span className="font-mono bg-secondary px-1.5 py-0.5 rounded-md text-foreground">g</span>. It is independent of the angle of inclination. Therefore, both spheres reach the bottom with the same speed.
              </p>
            </div>
          </div>
          
          <div className="ml-12 pt-4 flex items-center gap-3">
             <Button variant="outline" size="sm" className="rounded-xl text-muted-foreground hover:text-foreground"><ThumbsUp size={14} className="mr-2"/> Helpful</Button>
             <Button variant="outline" size="sm" className="rounded-xl text-muted-foreground hover:text-foreground"><ThumbsDown size={14} className="mr-2"/> Not Helpful</Button>
          </div>
        </div>
      </main>

      <div className="p-6 border-t border-border bg-background/80 backdrop-blur-md">
        <div className="max-w-3xl mx-auto relative group">
          <input 
            type="text" 
            placeholder="Ask AI a follow-up question about this solution..." 
            className="w-full bg-secondary/50 border border-border rounded-2xl pl-6 pr-16 py-4 text-base focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all group-hover:border-primary/30"
          />
          <Button size="icon" className="absolute right-2 top-2 rounded-xl h-11 w-11 shadow-sm transition-transform active:scale-95">
            <Send size={18} />
          </Button>
        </div>
      </div>
    </div>
  )
}