import { useState } from "react";
import { motion } from "framer-motion";
import { Upload, Utensils, Flame } from "lucide-react";

export default function Home() {
  const [selectedFile, setSelectedFile] = useState(null);
  const [preview, setPreview] = useState(null);
  const [resultImg, setResultImg] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    setSelectedFile(file);
    if (file) {
      setPreview(URL.createObjectURL(file));
    }
  };

  const handleAnalyze = async () => {
    if (!selectedFile) return;
    setLoading(true);

    const formData = new FormData();
    formData.append("file", selectedFile);

    const res = await fetch("/api/analyze", {
      method: "POST",
      body: formData,
    });

    const data = await res.json();
    setResultImg(data.imageUrl);
    setLoading(false);
  };

  return (
    <div className="min-h-screen bg-[url('https://images.unsplash.com/photo-1600891965050-d7a3c9f8c7c3?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80')] bg-cover bg-center flex flex-col items-center justify-center p-6 relative">
      <div className="absolute inset-0 bg-black/70" />

      <motion.div
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 1 }}
        className="relative z-10 bg-white/10 backdrop-blur-md rounded-2xl p-10 shadow-2xl max-w-2xl w-full text-center border border-white/20"
      >
        <Flame className="w-12 h-12 text-red-500 mx-auto mb-4" />
        <h1 className="text-4xl font-bold text-white mb-4">ChurrasTech AI</h1>
        <p className="text-white/80 mb-6 text-lg">
          Envie uma foto da carne e receba os cortes ideais para um churrasco perfeito 🍖
        </p>

        {/* Preview da imagem enviada */}
        {preview && (
          <img
            src={preview}
            alt="Preview"
            className="rounded-xl shadow-lg border border-white/20 mx-auto max-h-64 object-cover mb-6"
          />
        )}

        <div className="mb-6">
          <input
            type="file"
            accept="image/*"
            onChange={handleFileChange}
            className="hidden"
            id="upload-input"
          />
          <label
            htmlFor="upload-input"
            className="cursor-pointer inline-flex items-center px-6 py-3 bg-red-600 text-white rounded-xl shadow-lg hover:bg-red-700 transition"
          >
            <Upload className="w-5 h-5 mr-2" /> Enviar foto da carne
          </label>
        </div>

        <button
          onClick={handleAnalyze}
          disabled={!selectedFile || loading}
          className={`px-6 py-3 rounded-xl shadow-lg transition font-semibold flex items-center mx-auto ${
            selectedFile
              ? "bg-orange-500 hover:bg-orange-600 text-white"
              : "bg-gray-400 text-gray-700 cursor-not-allowed"
          }`}
        >
          <Utensils className="w-5 h-5 mr-2" />
          {loading ? "Analisando..." : "Analisar"}
        </button>

        {/* Resultado */}
        {resultImg && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="mt-8 bg-white/20 rounded-xl p-6 text-center text-white shadow-lg"
          >
            <h2 className="text-2xl font-bold mb-4">Resultado da análise 🍖</h2>
            <img
              src={resultImg}
              alt="Imagem com cortes"
              className="rounded-xl shadow-lg border border-white/30 mx-auto max-h-96 object-cover"
            />
          </motion.div>
        )}
      </motion.div>
    </div>
  );
}