"use client";

import React, { useState, useEffect, useRef } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { FerrisWheel, Trophy, X } from "lucide-react";
import { toast } from "sonner";

const COLORS = [
  "#f87171", "#fb923c", "#fbbf24", "#a3e635", 
  "#34d399", "#22d3ee", "#818cf8", "#e879f9"
];

export default function WheelPage() {

  const canvasRef = useRef<HTMLCanvasElement>(null);
  
  const [items, setItems] = useState<string[]>(["今晚吃火锅", "去看电影", "写代码", "早点睡觉", "打游戏", "喝奶茶"]);
  const [newItem, setNewItem] = useState("");
  const [isSpinning, setIsSpinning] = useState(false);

  const [winner, setWinner] = useState<string | null>(null);

  // Animation Refs
  const rotationRef = useRef(0);
  const speedRef = useRef(0);
  const requestRef = useRef<number>(0);
  
  // Draw Wheel
  const drawLine = (ctx: CanvasRenderingContext2D, center: number, radius: number) => {
     ctx.clearRect(0, 0, center * 2, center * 2);
     const total = items.length;
     const arc = (2 * Math.PI) / total;
     
     // Draw Slices
     for (let i = 0; i < total; i++) {
         const angle = rotationRef.current + i * arc;
         ctx.beginPath();
         ctx.fillStyle = COLORS[i % COLORS.length];
         ctx.moveTo(center, center);
         ctx.arc(center, center, radius, angle, angle + arc);
         ctx.lineTo(center, center);
         ctx.fill();
         ctx.stroke();

         // Text
         ctx.save();
         ctx.translate(center, center);
         ctx.rotate(angle + arc / 2);
         ctx.textAlign = "right";
         ctx.fillStyle = "#fff";
         ctx.font = "bold 14px Arial";
         ctx.fillText(items[i], radius - 20, 5);
         ctx.restore();
     }

     // Draw Pointer
     ctx.beginPath();
     ctx.fillStyle = "white";
     ctx.moveTo(center + radius - 10, center);
     ctx.lineTo(center + radius + 15, center - 10);
     ctx.lineTo(center + radius + 15, center + 10);
     ctx.fill();
     ctx.strokeStyle = "#333";
     ctx.stroke();
     
     // Center Circle
     ctx.beginPath();
     ctx.arc(center, center, 20, 0, 2 * Math.PI);
     ctx.fillStyle = "white";
     ctx.fill();
     ctx.stroke();
  };

  const animate = () => {
    if (speedRef.current > 0.001) {
        speedRef.current *= 0.985; // Friction
        rotationRef.current += speedRef.current;
        rotationRef.current %= 2 * Math.PI;
        
        const canvas = canvasRef.current;
        if (canvas) {
           const ctx = canvas.getContext("2d");
           if (ctx) drawLine(ctx, 200, 180);
        }
        
        requestRef.current = requestAnimationFrame(animate);
    } else {
        setIsSpinning(false);
        cancelAnimationFrame(requestRef.current);
        
        // Calculate Winner
        const total = items.length;
        const arc = (2 * Math.PI) / total;
        // Pointer is at 0 degrees (right side), wheel rotates clockwise
        // Effective angle is (2PI - current_rotation) % 2PI
        // But we need to account for slice index
        // Let's simplify:
        // Angle of slice i is: current_rot + i * arc
        // We want to know which slice covers angle 0
        // (current_rot + i * arc) % 2PI needs to enclose 0 (or 2PI)
        
        let currentRot = rotationRef.current % (2 * Math.PI);
        if (currentRot < 0) currentRot += 2 * Math.PI; // normalize
        
        // The pointer is at 0 radians (right).
        // A slice i spans from [currentRot + i*arc] to [currentRot + (i+1)*arc]
        // We find i such that this range includes 0 or 2PI.
        // Actually simpler: Which index i corresponds to angle 0?
        // angle_i_start = currentRot + i * arc
        // We want angle_i_start <= 2PI*k <= angle_i_end
        
        // Let's invert: what angle corresponds to pointer (which is at 0 relative to canvas)
        // relative to wheel 0? -> -currentRot
        let pointerAngle = (0 - currentRot); 
        if (pointerAngle < 0) pointerAngle += 2 * Math.PI;
        
        const winningIndex = Math.floor(pointerAngle / arc);
        const winItem = items[winningIndex % total];
        setWinner(winItem);
        toast.success(`结果揭晓：${winItem}！`);
    }
  };

  const spin = () => {
    if (items.length < 2) {
        toast.error("至少需要两个选项");
        return;
    }
    if (isSpinning) return;
    
    setIsSpinning(true);
    setWinner(null);
    speedRef.current = Math.random() * 0.3 + 0.4; // Initial speed
    animate();
  };

  useEffect(() => {
     const canvas = canvasRef.current;
     if (canvas) {
         const ctx = canvas.getContext("2d");
         if (ctx) {
             canvas.width = 400;
             canvas.height = 400;
             drawLine(ctx, 200, 180);
         }
     }
  }, [items]);

  const addItem = () => {
      if (newItem.trim()) {
          setItems([...items, newItem.trim()]);
          setNewItem("");
      }
  };

  const removeItem = (idx: number) => {
      setItems(items.filter((_, i) => i !== idx));
  };
  
  const clearItems = () => {
      if (confirm("确定要清空所有选项吗？")) setItems([]);
  }

  return (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
      <div className="flex items-center space-x-4 border-b pb-4">
        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-linear-to-br from-rose-400 to-red-500 shadow-lg">
          <FerrisWheel className="h-6 w-6 text-white" />
        </div>
        <div>
          <h1 className="text-2xl font-bold tracking-tight">大转盘抽奖</h1>
          <p className="text-muted-foreground">帮你在多个选项中做出随机决定</p>
        </div>
      </div>

      <div className="grid gap-6 lg:grid-cols-12">
        <Card className="lg:col-span-7 flex flex-col items-center justify-center p-8 bg-muted/10">
             <div className="relative">
                 <canvas 
                    ref={canvasRef} 
                    className="max-w-full h-auto cursor-pointer"
                    onClick={spin}
                 />
                 {/* Center Button Override just in case */}
                 <button 
                    className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-16 h-16 rounded-full bg-white shadow-xl flex items-center justify-center font-bold text-gray-800 border-4 border-gray-100 hover:scale-105 transition-transform z-10"
                    onClick={spin}
                 >
                    {isSpinning ? "..." : "GO"}
                 </button>
             </div>

             {winner && (
                 <div className="mt-8 text-center animate-in zoom-in duration-300">
                     <p className="text-muted-foreground text-sm">恭喜选中</p>
                     <h2 className="text-3xl font-extrabold text-primary flex items-center gap-3 justify-center">
                         <Trophy className="h-8 w-8 text-yellow-500" />
                         {winner}
                     </h2>
                 </div>
             )}
        </Card>

        <Card className="lg:col-span-5 h-fit">
            <CardHeader>
                <CardTitle className="flex justify-between items-center">
                    <span>选项列表 ({items.length})</span>
                    <Button variant="ghost" size="sm" onClick={clearItems} className="text-destructive hover:text-destructive">
                        清空
                    </Button>
                </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
                <div className="flex gap-2">
                    <Input 
                        value={newItem}
                        onChange={(e) => setNewItem(e.target.value)}
                        onKeyDown={(e) => e.key === "Enter" && addItem()}
                        placeholder="输入新选项..."
                    />
                    <Button onClick={addItem}>添加</Button>
                </div>

                <div className="bg-muted/30 rounded-lg p-2 max-h-100 overflow-y-auto space-y-2 border">
                    {items.length === 0 && (
                        <div className="text-center py-8 text-muted-foreground text-sm">
                            暂无选项，请添加
                        </div>
                    )}
                    {items.map((item, idx) => (
                        <div key={idx} className="flex items-center justify-between p-2 bg-background rounded shadow-xs border text-sm group">
                            <span className="truncate flex-1">{item}</span>
                            <Button 
                                variant="ghost" 
                                size="icon" 
                                className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive"
                                onClick={() => removeItem(idx)}
                            >
                                <X className="h-3 w-3" />
                            </Button>
                        </div>
                    ))}
                </div>

                <div className="pt-2">
                    <Button onClick={spin} disabled={isSpinning || items.length < 2} className="w-full" size="lg">
                        {isSpinning ? "抽奖中..." : "开始抽奖"}
                    </Button>
                </div>
            </CardContent>
        </Card>
      </div>
    </div>
  );
}