import { router } from '@inertiajs/react';
import { useState } from 'react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Icon } from '@/components/ui/icon';
import { Spinner } from '@/components/ui/spinner';
import { useI18n } from '@/hooks/use-i18n';
import { formatDate, formatDateTime } from '@/lib/datetime';
import { cn } from '@/lib/utils';

export type ClientEfacturaStatusClient = {
    id: number;
    cif: string | null;
    efactura_auth_url: string | null;
    efactura_has_anaf_token: boolean;
    efactura_anaf_token_synced_at: string | null;
    efactura_anaf_token_expires_at: string | null;
    efactura_token_needs_refresh: boolean;
};

type EfacturaUiStatus = 'connected' | 'expiring' | 'pending' | 'unavailable';

function resolveEfacturaStatus(client: ClientEfacturaStatusClient): EfacturaUiStatus {
    if (!client.efactura_has_anaf_token) {
        if (client.efactura_auth_url) {
            return 'pending';
        }

        return 'unavailable';
    }

    if (client.efactura_token_needs_refresh) {
        return 'expiring';
    }

    return 'connected';
}

const statusStyles: Record<
    EfacturaUiStatus,
    {
        card: string;
        iconWrap: string;
        icon: string;
        badgeVariant: 'successSoft' | 'warningSoft' | 'secondarySoft';
    }
> = {
    connected: {
        card: 'border-success/25 bg-success/5',
        iconWrap: 'bg-success/15 text-success',
        icon: 'solar:shield-check-bold-duotone',
        badgeVariant: 'successSoft',
    },
    expiring: {
        card: 'border-warning/35 bg-warning/8',
        iconWrap: 'bg-warning/15 text-warning',
        icon: 'solar:alarm-bold-duotone',
        badgeVariant: 'warningSoft',
    },
    pending: {
        card: 'border-warning/30 bg-warning/5',
        iconWrap: 'bg-warning/15 text-warning',
        icon: 'solar:key-minimalistic-square-2-bold-duotone',
        badgeVariant: 'warningSoft',
    },
    unavailable: {
        card: 'border-border bg-muted/30',
        iconWrap: 'bg-muted text-muted-foreground',
        icon: 'solar:info-circle-bold-duotone',
        badgeVariant: 'secondarySoft',
    },
};

export interface ClientEfacturaStatusPanelProps {
    client: ClientEfacturaStatusClient;
    className?: string;
}

export function ClientEfacturaStatusPanel({ client, className }: ClientEfacturaStatusPanelProps) {
    const { t, locale } = useI18n();
    const [refreshing, setRefreshing] = useState(false);
    const status = resolveEfacturaStatus(client);
    const styles = statusStyles[status];

    const syncedAtLabel =
        client.efactura_has_anaf_token && client.efactura_anaf_token_synced_at
            ? t('clients.show.efactura.status.synced_at', {
                  date: formatDateTime(client.efactura_anaf_token_synced_at, locale),
              })
            : null;

    const expiresAtLabel =
        client.efactura_has_anaf_token && client.efactura_anaf_token_expires_at
            ? t('clients.show.efactura.status.expires_at', {
                  date: formatDate(client.efactura_anaf_token_expires_at, locale),
              })
            : null;

    const handleRefreshToken = () => {
        setRefreshing(true);
        router.post(
            `/admin/clients/${client.id}/efactura/refresh-token`,
            {},
            {
                preserveScroll: true,
                onFinish: () => setRefreshing(false),
            },
        );
    };

    return (
        <Card className={cn('mb-6 overflow-hidden shadow-sm', styles.card, className)}>
            <CardContent className="flex flex-col gap-4 p-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6 sm:p-5">
                <div className="flex min-w-0 flex-1 items-start gap-4">
                    <div
                        className={cn(
                            'flex size-11 shrink-0 items-center justify-center rounded-xl',
                            styles.iconWrap,
                        )}
                        aria-hidden
                    >
                        <Icon icon={styles.icon} className="size-6" />
                    </div>

                    <div className="min-w-0 space-y-1">
                        <div className="flex flex-wrap items-center gap-2">
                            <p className="text-sm font-semibold tracking-tight">
                                {t('clients.show.efactura.status.title')}
                            </p>
                            <Badge variant={styles.badgeVariant} className="text-[11px]">
                                {t(`clients.show.efactura.status.${status}`)}
                            </Badge>
                        </div>

                        <p className="text-sm text-muted-foreground leading-relaxed">
                            {t(`clients.show.efactura.status.${status}_description`)}
                        </p>

                        <div className="flex flex-col gap-0.5">
                            {expiresAtLabel ? (
                                <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
                                    <Icon
                                        icon="solar:calendar-bold-duotone"
                                        className="size-3.5 shrink-0"
                                    />
                                    {expiresAtLabel}
                                </p>
                            ) : null}
                            {syncedAtLabel ? (
                                <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
                                    <Icon
                                        icon="solar:clock-circle-bold-duotone"
                                        className="size-3.5 shrink-0"
                                    />
                                    {syncedAtLabel}
                                </p>
                            ) : null}
                        </div>
                    </div>
                </div>

                <div className="flex w-full shrink-0 flex-col gap-2 sm:w-auto ">
                    {status === 'pending' && client.efactura_auth_url ? (
                        <Button size="sm" className="w-full" asChild>
                            <a
                                href={client.efactura_auth_url}
                                target="_blank"
                                rel="noopener noreferrer"
                            >
                                <Icon icon="solar:link-round-angle-bold-duotone" className="size-4" />
                                {t('clients.show.efactura.status.generate_token')}
                            </a>
                        </Button>
                    ) : null}

                    {status === 'expiring' ? (
                        <Button
                            size="sm"
                            variant="default"
                            className="w-full"
                            disabled={refreshing}
                            onClick={handleRefreshToken}
                        >
                            {refreshing ? (
                                <Spinner className="size-4" />
                            ) : (
                                <Icon icon="solar:refresh-bold-duotone" className="size-4" />
                            )}
                            {t('clients.show.efactura.status.refresh_token')}
                        </Button>
                    ) : null}

                    {status === 'connected' ? (
                        <div
                            className="mx-auto flex size-10 items-center justify-center rounded-full bg-success/10 text-success sm:mx-0 sm:size-11"
                            aria-hidden
                        >
                            <Icon icon="solar:check-circle-bold-duotone" className="size-6" />
                        </div>
                    ) : null}
                </div>
            </CardContent>
        </Card>
    );
}