// src/pages/edicao_cacamba.tsx

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';

export default function EdicaoCacambaPage() {
  const [formData, setFormData] = useState({
    id: 'CAC-001',
    capacidade: 6,
    status: 'Disponível',
    localizacao: 'Rua das Palmeiras, 123',
    observacoes: '',
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Dados salvos:', formData);
    alert('Caçamba atualizada com sucesso!');
    // Aqui futuramente você vai integrar com o Supabase para salvar
  };

  return (
    <div className="p-8 max-w-3xl mx-auto">
      <h1 className="text-3xl font-bold mb-8 text-center">Editar Caçamba</h1>
      
      <form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 rounded-2xl shadow-lg">
        <div>
          <Label htmlFor="id" className="text-lg font-medium">Identificação da Caçamba</Label>
          <Input 
            id="id"
            name="id"
            value={formData.id}
            onChange={handleChange}
            disabled
            className="mt-2 text-lg"
          />
        </div>

        <div>
          <Label htmlFor="capacidade" className="text-lg font-medium">Capacidade (m³)</Label>
          <Input 
            id="capacidade"
            name="capacidade"
            type="number"
            value={formData.capacidade}
            onChange={handleChange}
            className="mt-2 text-lg"
          />
        </div>

        <div>
          <Label htmlFor="status" className="text-lg font-medium">Status</Label>
          <Input 
            id="status"
            name="status"
            value={formData.status}
            onChange={handleChange}
            className="mt-2 text-lg"
          />
        </div>

        <div>
          <Label htmlFor="localizacao" className="text-lg font-medium">Localização Atual</Label>
          <Input 
            id="localizacao"
            name="localizacao"
            value={formData.localizacao}
            onChange={handleChange}
            className="mt-2 text-lg"
          />
        </div>

        <div>
          <Label htmlFor="observacoes" className="text-lg font-medium">Observações</Label>
          <Textarea
            id="observacoes"
            name="observacoes"
            value={formData.observacoes}
            onChange={handleChange}
            className="mt-2 text-lg"
            rows={4}
          />
        </div>

        <Button type="submit" variant="default" className="w-full text-lg py-6">
          Salvar Alterações
        </Button>
      </form>
    </div>
  );
}
