import { useQueries, useQuery } from '@tanstack/react-query';
import { Link } from 'react-router-dom';
import { api } from '@/api/client';
import type { LocaleStats } from '@/api/types';
import { useAuth } from '@/auth/AuthProvider';
import { ProgressBar } from '@/components/Status';

/**
 * Point d'entrée : les projets, et où en est chaque langue.
 *
 * Ce n'est délibérément PAS un tableau de bord. Un tableau de bord générique
 * affiche des chiffres que personne n'a demandés ; cet écran répond à la seule
 * question qu'on se pose en arrivant — « où reste-t-il du travail, et pour quelle
 * langue ? » — puis s'efface.
 */
export function ProjectsPage() {
    const { user, logout } = useAuth();

    const projects = useQuery({ queryKey: ['projects'], queryFn: api.projects });

    const stats = useQueries({
        queries: (projects.data ?? []).map((project) => ({
            queryKey: ['stats', project.uuid],
            queryFn: () => api.stats(project.uuid),
        })),
    });

    return (
        <div className="mx-auto max-w-5xl px-6 py-10">
            <header className="mb-10 flex items-baseline justify-between">
                <div>
                    <h1 className="text-xl font-semibold tracking-tight text-ink-900">Projets</h1>
                    <p className="mt-0.5 text-sm text-ink-500">
                        {user?.name}
                        {user?.isExternal && (
                            <span className="ml-2 rounded bg-ink-200 px-1.5 py-0.5 text-[11px] font-medium text-ink-600">
                                prestataire externe
                            </span>
                        )}
                    </p>
                </div>

                <div className="flex items-center gap-4">
                    {/* Absente pour tous les autres, pas grisée : un menu plein
                        d'options inaccessibles apprend à l'utilisateur que
                        l'interface ne le concerne pas. */}
                    {user?.isSuperAdmin && (
                        <Link
                            to="/admin"
                            className="text-sm text-ink-500 underline-offset-4 hover:text-ink-800 hover:underline"
                        >
                            Administration
                        </Link>
                    )}

                    <button
                        onClick={() => void logout()}
                        className="text-sm text-ink-500 underline-offset-4 hover:text-ink-800 hover:underline"
                    >
                        Se déconnecter
                    </button>
                </div>
            </header>

            {projects.isLoading && <p className="text-sm text-ink-400">Chargement…</p>}

            {projects.data?.length === 0 && (
                <div className="rounded-lg border border-dashed border-ink-300 p-10 text-center">
                    <p className="text-sm text-ink-600">Aucun projet ne vous est accessible.</p>
                    <p className="mt-1 text-xs text-ink-400">
                        L'accès à un projet s'obtient auprès de son administrateur.
                    </p>
                </div>
            )}

            <div className="space-y-4">
                {projects.data?.map((project, index) => {
                    const projectStats = stats[index]?.data;
                    const targets = (projectStats?.locales ?? []).filter((l) => !l.isSource);

                    return (
                        <article
                            key={project.uuid}
                            className="rounded-lg border border-ink-200 bg-white p-5 shadow-sm"
                        >
                            <div className="flex items-start justify-between gap-6">
                                <div className="min-w-0">
                                    <h2 className="font-semibold text-ink-900">{project.name}</h2>
                                    {project.description !== null && (
                                        <p className="mt-1 text-sm text-ink-500">
                                            {project.description}
                                        </p>
                                    )}
                                    <p className="mt-2 flex flex-wrap gap-1.5">
                                        {project.platforms.map((platform) => (
                                            <span
                                                key={platform.uuid}
                                                className="rounded bg-ink-100 px-1.5 py-0.5 font-mono text-[11px] text-ink-600"
                                                title={`Format ${platform.messageFormat}`}
                                            >
                                                {platform.slug}
                                            </span>
                                        ))}
                                    </p>
                                </div>

                                <span className="shrink-0 rounded bg-ink-100 px-2 py-1 font-mono text-[11px] text-ink-500">
                                    source&nbsp;: {project.sourceLocale.code}
                                </span>
                            </div>

                            {/* Les langues de l'utilisateur d'abord. Présenter les
                                sept langues d'un projet à une traductrice habilitée
                                sur deux, c'est lui faire trier son propre travail. */}
                            {(() => {
                                const mine = targets.filter((l) => l.canWrite);
                                const others = targets.filter((l) => !l.canWrite);
                                const split = mine.length > 0 && others.length > 0;

                                return (
                                    <>
                                        {split && (
                                            <p className="mt-5 text-[11px] font-semibold uppercase tracking-wide text-ink-400">
                                                Vos langues
                                            </p>
                                        )}

                                        <div
                                            className={`grid gap-x-8 gap-y-3 sm:grid-cols-2 ${split ? 'mt-2' : 'mt-5'}`}
                                        >
                                            {(split ? mine : targets).map((locale) => (
                                                <LocaleRow
                                                    key={locale.code}
                                                    locale={locale}
                                                    projectUuid={project.uuid}
                                                />
                                            ))}
                                        </div>

                                        {split && (
                                            <>
                                                <p className="mt-6 text-[11px] font-semibold uppercase tracking-wide text-ink-400">
                                                    Autres langues du projet · consultation
                                                </p>
                                                <div className="mt-2 grid gap-x-8 gap-y-3 opacity-60 sm:grid-cols-2">
                                                    {others.map((locale) => (
                                                        <LocaleRow
                                                            key={locale.code}
                                                            locale={locale}
                                                            projectUuid={project.uuid}
                                                        />
                                                    ))}
                                                </div>
                                            </>
                                        )}
                                    </>
                                );
                            })()}

                            {targets.length === 0 && stats[index]?.isSuccess && (
                                <p className="mt-4 text-xs text-ink-400">
                                    Aucune langue cible activée sur ce projet.
                                </p>
                            )}
                        </article>
                    );
                })}
            </div>
        </div>
    );
}

/**
 * Une langue, son avancement, et le raccourci vers le travail restant.
 *
 * Le lien mène directement à la grille filtrée sur ce qui reste à faire. C'est
 * la différence entre « voici l'état des lieux » et « voici votre travail » :
 * un clic de moins, mais surtout aucune décision à prendre en arrivant.
 */
function LocaleRow({ locale, projectUuid }: { locale: LocaleStats; projectUuid: string }) {
    const actionable = locale.untranslated + locale.draft + locale.needsReview;
    const readOnly = !locale.canWrite;

    return (
        <Link
            to={`/p/${projectUuid}/editor?locale=${locale.code}${actionable > 0 ? '&status=untranslated' : ''}`}
            className="group block rounded-md px-2 py-1.5 -mx-2 transition-colors hover:bg-ink-50"
        >
            <div className="flex items-baseline justify-between gap-3">
                <span className="truncate text-sm font-medium text-ink-800">
                    {locale.nativeName}
                    {locale.direction === 'rtl' && (
                        <span className="ml-1.5 text-[10px] font-normal text-ink-400">RTL</span>
                    )}
                </span>
                <span className="tabular shrink-0 text-sm text-ink-500">{locale.completion}%</span>
            </div>

            <div className="mt-1.5">
                <ProgressBar
                    reviewed={locale.reviewed}
                    translated={locale.translated}
                    needsReview={locale.needsReview}
                    draft={locale.draft}
                    total={locale.total}
                />
            </div>

            <div className="mt-1.5 flex items-center gap-3 text-[11px] text-ink-400">
                {readOnly ? (
                    <span className="text-ink-400">consultation</span>
                ) : actionable > 0 ? (
                    <span className="tabular font-medium text-ink-600">
                        {actionable} à traiter
                    </span>
                ) : (
                    <span className="text-emerald-600">Rien à faire</span>
                )}

                {/* Les traductions obsolètes sont sorties du lot : c'est le seul
                    chiffre qui signale un texte potentiellement faux en production. */}
                {locale.needsReview > 0 && (
                    <span className="tabular font-medium text-red-600">
                        {locale.needsReview} obsolète{locale.needsReview > 1 ? 's' : ''}
                    </span>
                )}
            </div>
        </Link>
    );
}