import { Head, Link } from '@inertiajs/react';

export default function Receipt({
    companyId,
    receipt,
    decision,
}: {
    companyId: number;
    decision?: null | { outcome: string; message: string; decided_at: string };
    receipt: {
        reference: string;
        received_at: string;
        snapshot: {
            opportunity: {
                title: string;
                form?: {
                    definition: { fields: { key: string; label: string }[] };
                };
            };
            profile: { version: number };
            answers: Record<
                string,
                string | number | null | Record<string, string>
            >;
        };
    };
}) {
    return (
        <>
            <Head title="Comprovativo de candidatura" />
            <main className="mx-auto max-w-3xl space-y-5 p-6">
                <h1 className="text-3xl font-semibold">Candidatura recebida</h1>
                {decision && (
                    <section className="space-y-2">
                        <h2 className="text-xl font-semibold">
                            {decision.outcome === 'accepted_for_analysis'
                                ? 'Aceite para análise'
                                : 'Não aceite para análise'}
                        </h2>
                        <p>{decision.message}</p>
                        <p>{decision.decided_at}</p>
                    </section>
                )}
                <p>{receipt.reference}</p>
                <p>
                    {receipt.received_at} · {receipt.snapshot.opportunity.title}{' '}
                    · perfil v{receipt.snapshot.profile.version}
                </p>
                <p>
                    A recepção não significa aceitação para análise, inclusão na
                    base, selecção ou contratação.
                </p>
                <dl>
                    {Object.entries(receipt.snapshot.answers).map(
                        ([key, value]) => (
                            <div key={key} className="my-3">
                                <dt className="font-semibold">
                                    {receipt.snapshot.opportunity.form?.definition.fields.find(
                                        (field) => field.key === key,
                                    )?.label ?? 'Resposta'}
                                </dt>
                                <dd>
                                    {value !== null && typeof value === 'object'
                                        ? Object.entries(value).map(
                                              ([part, text]) => (
                                                  <p key={part}>
                                                      {(
                                                          {
                                                              province:
                                                                  'Província',
                                                              district:
                                                                  'Distrito',
                                                              locality:
                                                                  'Localidade',
                                                          } as Record<
                                                              string,
                                                              string
                                                          >
                                                      )[part] ?? 'Local'}
                                                      : {text}
                                                  </p>
                                              ),
                                          )
                                        : (value ?? 'Não indicado')}
                                </dd>
                            </div>
                        ),
                    )}
                </dl>
                <Link
                    className="underline"
                    href={`/candidaturas/${companyId}/perfil`}
                >
                    O meu perfil e candidaturas
                </Link>
            </main>
        </>
    );
}