'use client';

import { useState, useEffect } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

export default function VisualizacaoSeguro() {
  const supabase = createClientComponentClient();
  const router = useRouter();
  const params = useSearchParams();
  const id = params.get('id')!;

  const [apolice, setApolice] = useState<any>(null);

  useEffect(() => {
    async function load() {
      const { data } = await supabase
        .from('insurance_policies')
        .select('*')
        .eq('id', id)
        .single();
      setApolice(data);
    }
    load();
  }, [id, supabase]);

  if (!apolice) return <div className="p-6 text-center">Carregando...</div>;

  return (
    <div className="p-6 max-w-3xl mx-auto">
      <h1 className="text-2xl font-bold mb-4">Detalhes da Apólice</h1>
      <Card className="shadow-lg">
        <CardContent className="space-y-3 p-6">
          <p>
            <strong>Tipo:</strong> {apolice.tipo}
          </p>
          <p>
            <strong>Seguradora:</strong> {apolice.seguradora}
          </p>
          <p>
            <strong>Cobertura:</strong> {apolice.cobertura}
          </p>
          <p>
            <strong>Valor Total:</strong> R${' '}
            {apolice.valor_total?.toFixed(2)}
          </p>
          <p>
            <strong>Valor Mensal:</strong> R${' '}
            {apolice.valor_mensal?.toFixed(2)}
          </p>
          <p>
            <strong>Data Início:</strong> {apolice.data_inicio}
          </p>
          <p>
            <strong>Data Fim:</strong> {apolice.data_fim || '—'}
          </p>
          <p>
            <strong>Status:</strong> {apolice.status}
          </p>
          <p>
            <strong>Observações:</strong> {apolice.observacoes || '—'}
          </p>

          <div className="flex gap-2 pt-4">
            <Button variant="outline" onClick={() => router.push('/seguros/listagem_seguro')}>
              Voltar
            </Button>
            <Button onClick={() => router.push(`/seguros/edicao_seguro?id=${id}`)}>
              Editar
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
