"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import BankAccountCard from '@/components/customui/BankAccountCard';

type Account = {
  id: number;
  accountname: string;
  accountdetails: string;
  minBalance: number | null;
  minIncome: number | null;
  accounturl?: string;
  bankLogo: string;
  bankName: string;
  accountType: string;
  features: string[];
  offers: string[];
};

export default function BankAccountDetailsPage() {
  const params = useParams();
  const { id } = params;
  const [account, setAccount] = useState<Account | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!id) return;
    const fetchAccount = async () => {
      setLoading(true);
      try {
        const res = await fetch(`/api/bankaccounts/${id}`);
        const data = await res.json();
        setAccount(data);
      } catch {
        setAccount(null);
      } finally {
        setLoading(false);
      }
    };
    fetchAccount();
  }, [id]);

  if (loading) return <div className="p-8 text-center">Loading...</div>;
  if (!account) return <div className="p-8 text-center text-red-600">Account not found.</div>;

  return (
    <div className="max-w-2xl mx-auto p-6">
      <BankAccountCard 
        id={account.id}
        bankLogo={account.bankLogo}
        bankName={account.bankName}
        accountName={account.accountname}
        minBalance={account.minBalance}
        minIncome={account.minIncome}
        accountType={account.accountType}
        features={account.features}
        offers={account.offers}
        accountUrl={account.accounturl}
      />
      <div className="mt-6">
        <h2 className="text-lg font-bold mb-2">Account Details</h2>
        <p className="text-gray-700 text-sm whitespace-pre-line">{account.accountdetails}</p>
      </div>
    </div>
  );
}