'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 VisualizacaoManutencoes() {
  const supabase = createClientComponentClient();
  const router = useRouter();
  const params = useSearchParams();
  const id = params.get('id')!;

  const [manut, setManut] = useState<any>(null);

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

  if (!manut) 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 Manutenção</h1>
      <Card className="shadow-lg">
        <CardContent className="space-y-3 p-6">
          <p><strong>ID Patrimônio:</strong> {manut.id_patrimonio}</p>
          <p><strong>Tipo:</strong> {manut.tipo}</p>
          <p><strong>Descrição:</strong> {manut.descricao}</p>
          <p><strong>Fornecedor:</strong> {manut.fornecedor_id || '—'}</p>
          <p><strong>Valor Custo:</strong> R$ {manut.valor_custo.toFixed(2)}</p>
          <p><strong>Data Manutenção:</strong> {manut.data_manutencao}</p>
          <p><strong>Data Pagamento:</strong> {manut.data_pagamento || '—'}</p>
          <p><strong>Observações:</strong> {manut.observacoes || '—'}</p>

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