import React, { useState } from 'react';
import { Camera, Ruler, Home, Palette, Armchair, Layers, Sparkles, MessageSquare, Check, Upload, X } from 'lucide-react';

const InteriorDesignForm = () => {
  const [formData, setFormData] = useState({
    images: [],
    dimensions: {
      wallA: { size: '', obs: '' },
      wallB: { size: '', obs: '' },
      wallC: { size: '', obs: '' },
      wallD: { size: '', obs: '' }
    },
    function: '',
    functionNotes: '',
    style: '',
    styleOther: '',
    colors: [],
    colorsOther: '',
    furniture: '',
    materials: '',
    atmosphere: '',
    extraInfo: ''
  });

  const [submitted, setSubmitted] = useState(false);

  // --- HANDLERS ---

  const handleImageUpload = (e) => {
    const files = Array.from(e.target.files);
    if (files.length > 4) {
      alert("Por favor, envie no máximo 4 imagens.");
      return;
    }
    
    const newImages = files.map(file => ({
      file,
      preview: URL.createObjectURL(file)
    }));
    
    setFormData(prev => ({ ...prev, images: newImages }));
  };

  const removeImage = (index) => {
    setFormData(prev => ({
      ...prev,
      images: prev.images.filter((_, i) => i !== index)
    }));
  };

  const handleDimensionChange = (wall, field, value) => {
    setFormData(prev => ({
      ...prev,
      dimensions: {
        ...prev.dimensions,
        [wall]: { ...prev.dimensions[wall], [field]: value }
      }
    }));
  };

  const toggleColor = (color) => {
    setFormData(prev => {
      const newColors = prev.colors.includes(color)
        ? prev.colors.filter(c => c !== color)
        : [...prev.colors, color];
      return { ...prev, colors: newColors };
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    console.log("Dados do Formulário:", formData);
  };

  // --- SECTIONS DATA ---

  const styles = [
    { id: 'minimalista', label: 'Minimalista', desc: 'Simples, poucos objetos, visual limpo' },
    { id: 'escandinavo', label: 'Escandinavo', desc: 'Claro, confortável, madeira clara' },
    { id: 'industrial', label: 'Industrial', desc: 'Aparência moderna, metal, concreto, preto' },
    { id: 'classico', label: 'Clássico Contemporâneo', desc: 'Elegante, sofisticado' },
    { id: 'boho', label: 'Boho Chic', desc: 'Natural, colorido, cheio de personalidade' },
    { id: 'moderno', label: 'Moderno', desc: 'Linhas retas, organização, contraste' },
    { id: 'outro', label: 'Outro', desc: '' }
  ];

  const palettes = [
    { id: 'neutros', label: 'Tons Neutros', desc: '(branco, bege, cinza)' },
    { id: 'terrosos', label: 'Tons Terrosos', desc: '(caramelo, terracota, marrom, verde musgo)' },
    { id: 'frias', label: 'Cores Frias', desc: '(azul, verde, lilás)' },
    { id: 'quentes', label: 'Cores Quentes', desc: '(amarelo, laranja, vermelho, rosa forte)' },
    { id: 'pasteis', label: 'Tons Pastéis', desc: '(rosa bebê, azul claro, pêssego)' },
    { id: 'profundos', label: 'Tons Profundos', desc: '(azul petróleo, verde esmeralda, vinho)' },
  ];

  if (submitted) {
    return (
      <div className="min-h-screen bg-gray-50 p-8 flex items-center justify-center">
        <div className="bg-white p-8 rounded-xl shadow-lg max-w-2xl w-full text-center">
          <div className="w-16 h-16 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
            <Check size={32} />
          </div>
          <h2 className="text-2xl font-bold text-gray-800 mb-4">Formulário Enviado com Sucesso!</h2>
          <p className="text-gray-600 mb-6">Os dados foram capturados e estão prontos para processamento.</p>
          
          <div className="bg-gray-100 p-4 rounded text-left overflow-auto max-h-64 text-sm font-mono">
            <pre>{JSON.stringify(formData, (key, value) => {
              if (key === 'images') return value.map(img => img.file.name); // Não mostrar o blob da imagem no JSON
              if (key === 'file') return undefined; 
              if (key === 'preview') return undefined;
              return value;
            }, 2)}</pre>
          </div>
          
          <button 
            onClick={() => setSubmitted(false)}
            className="mt-6 bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700"
          >
            Preencher Novamente
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8 font-sans">
      <div className="max-w-4xl mx-auto">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
            Consulta de Design de Interiores
          </h1>
          <p className="mt-4 text-lg text-gray-600">
            Preencha os detalhes abaixo para criarmos o ambiente perfeito para você.
          </p>
        </div>

        <form onSubmit={handleSubmit} className="space-y-8">
          
          {/* SEÇÃO 1: IMAGENS */}
          <section className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <div className="p-6 sm:p-8">
              <div className="flex items-center mb-6">
                <div className="p-2 bg-blue-100 rounded-lg text-blue-600 mr-4">
                  <Camera size={24} />
                </div>
                <div>
                  <h2 className="text-xl font-bold text-gray-900">1. Imagem do Cômodo</h2>
                  <p className="text-gray-500 text-sm">Envie até 4 fotos. A primeira será a base da decoração.</p>
                </div>
              </div>

              <div className="space-y-4">
                <div className="flex items-center justify-center w-full">
                  <label className="flex flex-col items-center justify-center w-full h-48 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition">
                    <div className="flex flex-col items-center justify-center pt-5 pb-6">
                      <Upload className="w-10 h-10 mb-3 text-gray-400" />
                      <p className="mb-2 text-sm text-gray-500"><span className="font-semibold">Clique para enviar</span> ou arraste</p>
                      <p className="text-xs text-gray-500">JPG, PNG (Max 4 fotos)</p>
                    </div>
                    <input type="file" className="hidden" multiple accept="image/*" onChange={handleImageUpload} />
                  </label>
                </div>

                {/* Grid de Preview */}
                {formData.images.length > 0 && (
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
                    {formData.images.map((img, index) => (
                      <div key={index} className="relative group aspect-square rounded-lg overflow-hidden border border-gray-200">
                        <img src={img.preview} alt={`Preview ${index}`} className="w-full h-full object-cover" />
                        <button
                          type="button"
                          onClick={() => removeImage(index)}
                          className="absolute top-1 right-1 bg-red-500 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition"
                        >
                          <X size={14} />
                        </button>
                        {index === 0 && (
                          <span className="absolute bottom-0 left-0 right-0 bg-black/60 text-white text-xs text-center py-1">
                            Imagem Base
                          </span>
                        )}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </section>

          {/* SEÇÃO 2: DIMENSÕES */}
          <section className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <div className="p-6 sm:p-8">
              <div className="flex items-center mb-6">
                <div className="p-2 bg-indigo-100 rounded-lg text-indigo-600 mr-4">
                  <Ruler size={24} />
                </div>
                <div>
                  <h2 className="text-xl font-bold text-gray-900">2. Dimensões e Paredes</h2>
                  <p className="text-gray-500 text-sm">Informe medidas e detalhes como portas, janelas e tomadas.</p>
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {['A', 'B', 'C', 'D'].map((wall) => (
                  <div key={wall} className="bg-gray-50 p-4 rounded-xl border border-gray-200">
                    <h3 className="font-bold text-gray-700 mb-3 border-b pb-2">Parede {wall}</h3>
                    <div className="space-y-3">
                      <div>
                        <label className="block text-xs font-semibold text-gray-500 uppercase mb-1">Medida (m)</label>
                        <input
                          type="text"
                          placeholder="Ex: 3.50m"
                          className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-indigo-500 outline-none"
                          value={formData.dimensions[`wall${wall}`].size}
                          onChange={(e) => handleDimensionChange(`wall${wall}`, 'size', e.target.value)}
                        />
                      </div>
                      <div>
                        <label className="block text-xs font-semibold text-gray-500 uppercase mb-1">Observações</label>
                        <textarea
                          rows="2"
                          placeholder="Ex: Possui janela central, tomada à direita..."
                          className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-indigo-500 outline-none resize-none text-sm"
                          value={formData.dimensions[`wall${wall}`].obs}
                          onChange={(e) => handleDimensionChange(`wall${wall}`, 'obs', e.target.value)}
                        />
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>

          {/* SEÇÃO 3: FUNÇÃO */}
          <section className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <div className="p-6 sm:p-8">
              <div className="flex items-center mb-6">
                <div className="p-2 bg-orange-100 rounded-lg text-orange-600 mr-4">
                  <Home size={24} />
                </div>
                <div>
                  <h2 className="text-xl font-bold text-gray-900">3. Função do Ambiente</h2>
                  <p className="text-gray-500 text-sm">Ex: Sala de estar, Quarto, Home Office...</p>
                </div>
              </div>

              <input
                type="text"
                className="w-full p-4 border border-gray-300 rounded-lg mb-4 text-lg focus:ring-2 focus:ring-orange-500 outline-none"
                placeholder="Qual será o uso principal deste espaço?"
                value={formData.function}
                onChange={(e) => setFormData({ ...formData, function: e.target.value })}
              />
              <textarea
                className="w-full p-4 border border-gray-300 rounded-lg h-24 text-sm focus:ring-2 focus:ring-orange-500 outline-none resize-none"
                placeholder="Deseja acrescentar algo sobre como você usa o ambiente? (Opcional)"
                value={formData.functionNotes}
                onChange={(e) => setFormData({ ...formData, functionNotes: e.target.value })}
              />
            </div>
          </section>

          {/* SEÇÃO 4: ESTILO */}
          <section className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <div className="p-6 sm:p-8">
              <div className="flex items-center mb-6">
                <div className="p-2 bg-pink-100 rounded-lg text-pink-600 mr-4">
                  <Sparkles size={24} />
                </div>
                <div>
                  <h2 className="text-xl font-bold text-gray-900">4. Estilo de Decoração</h2>
                  <p className="text-gray-500 text-sm">Selecione o estilo que mais lhe agrada.</p>
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {styles.map((style) => (
                  <label key={style.id} className={`
                    relative flex p-4 border rounded-xl cursor-pointer transition-all
                    ${formData.style === style.id ? 'border-pink-500 bg-pink-50 ring-1 ring-pink-500' : 'border-gray-200 hover:border-pink-300'}
                  `}>
                    <input
                      type="radio"
                      name="style"
                      value={style.id}
                      checked={formData.style === style.id}
                      onChange={(e) => setFormData({ ...formData, style: e.target.value })}
                      className="w-4 h-4 text-pink-600 mt-1"
                    />
                    <div className="ml-3">
                      <span className="block text-sm font-medium text-gray-900">{style.label}</span>
                      {style.desc && <span className="block text-sm text-gray-500">{style.desc}</span>}
                    </div>
                  </label>
                ))}
              </div>
              
              {formData.style === 'outro' && (
                <textarea
                  className="mt-4 w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 outline-none"
                  placeholder="Descreva seu estilo..."
                  value={formData.styleOther}
                  onChange={(e) => setFormData({ ...formData, styleOther: e.target.value })}
                />
              )}
            </div>
          </section>

          {/* SEÇÃO 5: PALETA DE CORES */}
          <section className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <div className="p-6 sm:p-8">
              <div className="flex items-center mb-6">
                <div className="p-2 bg-teal-100 rounded-lg text-teal-600 mr-4">
                  <Palette size={24} />
                </div>
                <div>
                  <h2 className="text-xl font-bold text-gray-900">5. Paleta de Cores</h2>
                  <p className="text-gray-500 text-sm">Escolha uma ou mais opções.</p>
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                {palettes.map((palette) => (
                  <div 
                    key={palette.id}
                    onClick={() => toggleColor(palette.id)}
                    className={`
                      flex items-center p-4 border rounded-xl cursor-pointer transition-all
                      ${formData.colors.includes(palette.id) ? 'border-teal-500 bg-teal-50' : 'border-gray-200 hover:border-teal-300'}
                    `}
                  >
                    <div className={`
                      w-5 h-5 rounded border flex items-center justify-center mr-3
                      ${formData.colors.includes(palette.id) ? 'bg-teal-500 border-teal-500' : 'border-gray-400 bg-white'}
                    `}>
                      {formData.colors.includes(palette.id) && <Check size={14} className="text-white" />}
                    </div>
                    <div>
                      <span className="block font-medium text-gray-900">{palette.label}</span>
                      <span className="text-xs text-gray-500">{palette.desc}</span>
                    </div>
                  </div>
                ))}
              </div>
              
              <div className="mt-4">
                <label className="text-sm font-medium text-gray-700">Outra combinação?</label>
                <input
                  type="text"
                  className="mt-1 w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 outline-none"
                  placeholder="Descreva aqui..."
                  value={formData.colorsOther}
                  onChange={(e) => setFormData({ ...formData, colorsOther: e.target.value })}
                />
              </div>
            </div>
          </section>