import { Link } from '@inertiajs/react';
import SectorEntry, { type SectorEntryData } from '@/components/sector-entry';

export type SectorDetailData = {
    sector: {
        id: number;
        name: string;
        slug: string;
        description: string | null;
        short_description: string | null;
    };
    sectorEntry?: SectorEntryData | null;
    opportunities?: {
        title: string;
        slug: string;
        province: string | null;
        summary: string | null;
    }[];
};
const button =
    'inline-block rounded-lg bg-emerald-800 px-5 py-3 font-semibold text-white disabled:opacity-50';
export default function SectorContent({
    sector,
    sectorEntry,
    opportunities,
    headingLevel = 2,
}: SectorDetailData & { headingLevel?: 2 | 3 }) {
    const Heading = headingLevel === 2 ? 'h2' : 'h3';
    return (
        <div className="space-y-5">
            <p className="whitespace-pre-line">
                {sector.description ||
                    sector.short_description ||
                    'Descrição sectorial em preparação.'}
            </p>
            {!sectorEntry && (
                <Link
                    className={button}
                    href={'/investimentos/iniciar?source=sector:' + sector.id}
                >
                    Iniciar ou continuar uma ideia neste sector
                </Link>
            )}
            {sectorEntry && (
                <SectorEntry
                    headingLevel={headingLevel}
                    data={{
                        ...sectorEntry,
                        start_href: sectorEntry.start_href
                            ? '/investimentos/iniciar?source=sector:' +
                              sector.id
                            : null,
                    }}
                />
            )}
            <Heading className="text-xl font-bold">
                Oportunidades no sector
            </Heading>
            {opportunities?.map((o) => (
                <article key={o.slug} className="rounded border bg-white p-5">
                    <Link
                        className="text-lg font-bold underline"
                        href={`/oportunidades/${o.slug}`}
                    >
                        {o.title}
                    </Link>
                    <p>{o.province}</p>
                    <p>{o.summary}</p>
                    <ul aria-label="Localizações associadas">
                        {sectorEntry?.locations
                            .filter(
                                (l) => l.href === `/oportunidades/${o.slug}`,
                            )
                            .filter(
                                (l, i, rows) =>
                                    rows.findIndex(
                                        (other) =>
                                            JSON.stringify(other.location) ===
                                            JSON.stringify(l.location),
                                    ) === i,
                            )
                            .map((l, i) => (
                                <li key={i}>
                                    {typeof l.location.name === 'string'
                                        ? l.location.name
                                        : 'Consultar localização e fonte na oportunidade'}
                                </li>
                            ))}
                    </ul>
                </article>
            ))}
            {!opportunities?.length && (
                <p>Sem oportunidades publicadas neste sector.</p>
            )}
            <Link
                className={button}
                href={`/oportunidades?sector=${sector.slug}`}
            >
                Pesquisar todas as oportunidades do sector
            </Link>
            <p>
                <Link href="/como-investir" className="underline">
                    Preparar o investimento
                </Link>{' '}
                ·{' '}
                <Link href="/apoio" className="underline">
                    Pedir apoio sectorial
                </Link>
            </p>
        </div>
    );
}