'use client';

import { useEffect, useRef, useState } from 'react';
import { useRouter } from 'next/navigation';
import { motion, AnimatePresence } from 'framer-motion';
import { ArrowLeft, Eraser, Sparkles, Loader2, RotateCcw } from 'lucide-react';
import Mascot from '../Mascot';
import SpeakButton from '../SpeakButton';
import DemoBadge from '../DemoBadge';

const COLORS = ['#3B322B', '#FF8B5E', '#4DC08B', '#FFC94A', '#6FB6F0', '#F58BB0'];

export default function AiDraw() {
  const router = useRouter();
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const drawing = useRef(false);
  const [color, setColor] = useState('#3B322B');
  const [busy, setBusy] = useState(false);
  const [result, setResult] = useState<string | null>(null);
  const [error, setError] = useState('');

  // Set up the canvas backing store (white bg, high-DPI aware).
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ratio = Math.min(window.devicePixelRatio || 1, 2);
    const rect = canvas.getBoundingClientRect();
    canvas.width = rect.width * ratio;
    canvas.height = rect.height * ratio;
    const ctx = canvas.getContext('2d')!;
    ctx.scale(ratio, ratio);
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, rect.width, rect.height);
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
  }, []);

  function pos(e: React.PointerEvent) {
    const rect = canvasRef.current!.getBoundingClientRect();
    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
  }

  function start(e: React.PointerEvent) {
    drawing.current = true;
    const ctx = canvasRef.current!.getContext('2d')!;
    const { x, y } = pos(e);
    ctx.strokeStyle = color;
    ctx.lineWidth = 6;
    ctx.beginPath();
    ctx.moveTo(x, y);
  }
  function move(e: React.PointerEvent) {
    if (!drawing.current) return;
    const ctx = canvasRef.current!.getContext('2d')!;
    const { x, y } = pos(e);
    ctx.lineTo(x, y);
    ctx.stroke();
  }
  function end() {
    drawing.current = false;
  }

  function clear() {
    const canvas = canvasRef.current!;
    const ctx = canvas.getContext('2d')!;
    const rect = canvas.getBoundingClientRect();
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, rect.width, rect.height);
    setResult(null);
  }

  async function show() {
    setBusy(true);
    setError('');
    setResult(null);
    try {
      const image = canvasRef.current!.toDataURL('image/png');
      const res = await fetch('/api/ai/describe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ image }),
      });
      const data = await res.json();
      if (res.ok && data.ok) {
        setResult(data.description);
      } else {
        setError(data.error ?? 'দেখানো গেল না।');
      }
    } catch {
      setError('নেটওয়ার্ক সমস্যা, আবার চেষ্টা করো।');
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="min-h-dvh pb-24 lg:pb-0 lg:pl-24">
      <header className="sticky top-0 z-30 bg-cream/90 px-4 pb-3 pt-4 backdrop-blur sm:px-6">
        <div className="mx-auto flex max-w-2xl items-center gap-3">
          <button
            onClick={() => router.push('/app/ai')}
            aria-label="ফিরে যাও"
            className="rounded-full p-2 text-ink-soft transition hover:bg-cream-200"
          >
            <ArrowLeft className="h-5 w-5" />
          </button>
          <h1 className="font-heading text-xl font-extrabold text-ink">আঁকা বন্ধু</h1>
          <DemoBadge className="ml-auto" />
        </div>
      </header>

      <main className="mx-auto max-w-2xl px-4 pt-4 sm:px-6">
        <div className="flex items-center gap-3">
          <Mascot mood="happy" size={48} />
          <p className="rounded-2xl bg-white px-4 py-2 text-sm font-medium text-ink-soft shadow-card">
            যা খুশি আঁকো, তারপর আমাকে দেখাও — আমি বলব কী দেখছি! 🎨
          </p>
        </div>

        {/* canvas */}
        <canvas
          ref={canvasRef}
          onPointerDown={start}
          onPointerMove={move}
          onPointerUp={end}
          onPointerLeave={end}
          className="mt-4 h-72 w-full touch-none rounded-3xl bg-white shadow-card sm:h-80"
          style={{ touchAction: 'none' }}
        />

        {/* palette + tools */}
        <div className="mt-3 flex flex-wrap items-center gap-2">
          {COLORS.map((c) => (
            <button
              key={c}
              onClick={() => setColor(c)}
              aria-label={`রং ${c}`}
              className={`h-9 w-9 rounded-full border-2 transition active:scale-90 ${
                color === c ? 'border-ink' : 'border-white'
              }`}
              style={{ backgroundColor: c }}
            />
          ))}
          <button
            onClick={clear}
            className="ml-auto flex items-center gap-1 rounded-full bg-cream-200 px-3 py-2 text-sm font-semibold text-ink-soft transition active:scale-95"
          >
            <Eraser className="h-4 w-4" /> মুছো
          </button>
        </div>

        <button
          onClick={show}
          disabled={busy}
          className="mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-mango-500 px-5 py-3.5 font-bold text-white shadow-pop transition active:scale-[0.98] disabled:opacity-60"
        >
          {busy ? <Loader2 className="h-5 w-5 animate-spin" /> : <Sparkles className="h-5 w-5" />}
          তারাকে দেখাও
        </button>

        {error && (
          <p className="mt-4 rounded-2xl bg-mango-50 px-4 py-3 text-center text-sm font-medium text-mango-700">
            {error}
          </p>
        )}

        <AnimatePresence>
          {result && (
            <motion.div
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              className="mt-4 flex items-start gap-3 rounded-3xl bg-leaf-50 p-5 shadow-card"
            >
              <Mascot mood="happy" size={44} />
              <p className="flex-1 text-[15px] leading-relaxed text-ink">{result}</p>
              <SpeakButton text={result} autoPlay />
            </motion.div>
          )}
        </AnimatePresence>
      </main>
    </div>
  );
}