import React, { useEffect, useState } from 'react';

type QuoteRecord = {
    id: string;
    quoteNumber: string;
    contact: string;
    status: string;
    total: string;
    expiry: string | null;
    creator: string;
};

type QuotesBootstrap = {
    companyName: string;
    quotesEndpoint: string;
};

export function QuotesWorkspace({ bootstrap }: { bootstrap: QuotesBootstrap }) {
    const [quotes, setQuotes] = useState<QuoteRecord[]>([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        async function loadQuotes() {
            const response = await fetch(bootstrap.quotesEndpoint, {
                credentials: 'same-origin',
                headers: { Accept: 'application/json' },
            });

            const json = await response.json();
            setQuotes(json.data ?? []);
            setLoading(false);
        }

        void loadQuotes();
    }, [bootstrap.quotesEndpoint]);

    return (
        <div className="space-y-6">
            <section className="rounded-[30px] border border-slate-200/80 bg-white p-8 shadow-[0_20px_80px_-40px_rgba(15,23,42,0.35)]">
                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-emerald-600">Quotes</p>
                <h2 className="mt-2 text-3xl font-semibold tracking-tight text-slate-950">Quote workspace</h2>
                <p className="mt-3 max-w-3xl text-sm leading-7 text-slate-600">
                    Structured quotes turn chat interest into a concrete commercial proposal. This page now shows real tenant quote records connected to leads and contacts.
                </p>
            </section>

            <section className="overflow-hidden rounded-[30px] border border-slate-200/80 bg-white shadow-[0_20px_80px_-40px_rgba(15,23,42,0.35)]">
                <div className="border-b border-slate-200 px-6 py-5">
                    <h3 className="text-xl font-semibold text-slate-950">{bootstrap.companyName} quotes</h3>
                    <p className="mt-1 text-sm text-slate-500">{loading ? 'Loading quotes...' : `${quotes.length} quote records available.`}</p>
                </div>

                <div className="overflow-x-auto">
                    <table className="min-w-full divide-y divide-slate-200 text-sm">
                        <thead className="bg-slate-50 text-left text-slate-500">
                            <tr>
                                <th className="px-6 py-4 font-semibold">Quote #</th>
                                <th className="px-6 py-4 font-semibold">Contact</th>
                                <th className="px-6 py-4 font-semibold">Status</th>
                                <th className="px-6 py-4 font-semibold">Total</th>
                                <th className="px-6 py-4 font-semibold">Expiry</th>
                                <th className="px-6 py-4 font-semibold">Creator</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-slate-200">
                            {quotes.map((quote) => (
                                <tr key={quote.id}>
                                    <td className="px-6 py-5 font-semibold text-slate-950">{quote.quoteNumber}</td>
                                    <td className="px-6 py-5 text-slate-600">{quote.contact}</td>
                                    <td className="px-6 py-5">
                                        <span className="rounded-full bg-blue-100 px-3 py-1 text-xs font-semibold text-blue-700">
                                            {quote.status}
                                        </span>
                                    </td>
                                    <td className="px-6 py-5 text-slate-600">{quote.total}</td>
                                    <td className="px-6 py-5 text-slate-600">{quote.expiry ?? 'No expiry'}</td>
                                    <td className="px-6 py-5 text-slate-600">{quote.creator}</td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    );
}

export type { QuotesBootstrap };
