'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Card, CardContent } from '@/components/ui/card';

export default function CadastroSeguro() {
  const supabase = createClientComponentClient();
  const router = useRouter();

  const [form, setForm] = useState({
    tipo: '',
    seguradora: '',
    cobertura: '',
    valor_total: '',
    valor_mensal: '',
    data_inicio: '',
    data_fim: '',
    status: 'ativo',
    observacoes: '',
  });

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await supabase.from('insurance_policies').insert([{
      ...form,
      valor_total: parseFloat(form.valor_total),
      valor_mensal: parseFloat(form.valor_mensal),
    }]);
    router.push('/seguros/listagem_seguro');
  };

  return (
    <div className="p-6 max-w-3xl mx-auto">
      <Card className="shadow-lg">
        <CardContent className="space-y-4 p-6">
          <h1 className="text-2xl font-bold">Nova Apólice de Seguro</h1>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <Label>Tipo</Label>
              <Input name="tipo" value={form.tipo} onChange={handleChange} required />
            </div>

            <div>
              <Label>Seguradora</Label>
              <Input name="seguradora" value={form.seguradora} onChange={handleChange} required />
            </div>

            <div>
              <Label>Cobertura</Label>
              <Textarea name="cobertura" value={form.cobertura} onChange={handleChange} />
            </div>

            <div>
              <Label>Valor Total (R$)</Label>
              <Input name="valor_total" type="number" value={form.valor_total} onChange={handleChange} />
            </div>

            <div>
              <Label>Valor Mensal (R$)</Label>
              <Input name="valor_mensal" type="number" value={form.valor_mensal} onChange={handleChange} />
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>Data Início</Label>
                <Input name="data_inicio" type="date" value={form.data_inicio} onChange={handleChange} />
              </div>
              <div>
                <Label>Data Fim</Label>
                <Input name="data_fim" type="date" value={form.data_fim} onChange={handleChange} />
              </div>
            </div>

            <div>
              <Label>Status</Label>
              <Input name="status" value={form.status} onChange={handleChange} />
            </div>

            <div>
              <Label>Observações</Label>
              <Textarea name="observacoes" value={form.observacoes} onChange={handleChange} />
            </div>

            <Button type="submit" className="w-full bg-green-600 text-white">Salvar Apólice</Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}
