import { useState } from 'react';
import { InfoButton } from '@/components/grow-better/help-tip';
import { Checkbox } from '@/components/ui/checkbox';
import type { GrowBetterDirection, ScoredPillar } from '@/types/grow-better';

const directions: Record<string, GrowBetterDirection> = {
    revenue: 'higher',
    profit: 'higher',
    cash: 'balanced',
    debt: 'lower',
    ops: 'higher',
    retention: 'higher',
};

export function GrowBetterPillars({
    pillars,
    onEnable,
}: {
    pillars: ScoredPillar[];
    onEnable: (key: string, enabled: boolean) => void;
}) {
    const [open, setOpen] = useState<Record<string, boolean>>({});

    return (
        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
            {pillars.map((pillar) => {
                const disabled = pillar.optional && pillar.weight === 0;

                return (
                    <article
                        key={pillar.key}
                        className={`rounded-xl border bg-card p-5 ${disabled ? 'border-dashed bg-muted/30' : ''}`}
                    >
                        <div className="mb-4 flex items-center justify-between">
                            <span
                                className="size-2 rounded-full"
                                style={{ background: pillar.color }}
                            />
                            <span className="text-[11px] font-semibold text-muted-foreground tabular-nums">
                                {pillar.weight}%
                            </span>
                        </div>
                        <h3 className="flex items-center gap-1.5 text-sm font-semibold">
                            {pillar.name}
                            <InfoButton
                                title={pillar.name}
                                help={pillar.help}
                                direction={directions[pillar.key] ?? 'higher'}
                            />
                        </h3>
                        <p className="mt-1 text-xs text-muted-foreground">
                            {pillar.optional ? 'optional · ' : ''}
                            {pillar.active_kpi_count} of {pillar.kpi_count} KPIs
                            active
                        </p>
                        {disabled ? (
                            <label className="mt-6 flex items-center gap-2 text-sm">
                                <Checkbox
                                    checked={false}
                                    onCheckedChange={(checked) =>
                                        onEnable(pillar.key, checked === true)
                                    }
                                />
                                Enable pillar
                            </label>
                        ) : (
                            <>
                                <p className="mt-4 text-4xl font-light tabular-nums">
                                    {pillar.display_score ?? '—'}
                                    <span className="ml-1 text-sm text-muted-foreground">
                                        /100
                                    </span>
                                </p>
                                <p
                                    className={`mt-2 text-xs font-semibold ${pillar.delta !== null && pillar.delta < 0 ? 'text-destructive' : 'text-emerald-600 dark:text-emerald-400'}`}
                                >
                                    {pillar.delta === null
                                        ? 'No prior period'
                                        : `${pillar.delta >= 0 ? '↑' : '↓'} ${pillar.delta > 0 ? '+' : ''}${pillar.delta} pts`}
                                </p>
                                <div className="mt-3 h-0.5 overflow-hidden rounded-full bg-muted">
                                    <div
                                        className="h-full rounded-full bg-primary"
                                        style={{
                                            width: `${pillar.display_score ?? 0}%`,
                                        }}
                                    />
                                </div>
                                <div className="mt-4 flex items-center justify-between border-t pt-3 text-xs text-muted-foreground">
                                    <span>Contributes</span>
                                    <span>
                                        <strong className="text-foreground tabular-nums">
                                            {pillar.contribution}
                                        </strong>{' '}
                                        / 1000
                                    </span>
                                </div>
                                <button
                                    type="button"
                                    className="mt-3 text-xs font-semibold text-primary"
                                    onClick={() =>
                                        setOpen((current) => ({
                                            ...current,
                                            [pillar.key]: !current[pillar.key],
                                        }))
                                    }
                                >
                                    {open[pillar.key]
                                        ? 'Hide KPIs'
                                        : 'View KPIs'}
                                </button>
                                {open[pillar.key] && (
                                    <ul className="mt-3 space-y-2 border-t pt-3">
                                        {pillar.kpis.map((kpi) => (
                                            <li
                                                key={kpi.key}
                                                className={`flex items-start justify-between gap-3 text-xs ${kpi.enabled ? '' : 'opacity-40'}`}
                                            >
                                                <div>
                                                    <p className="flex items-center gap-1 font-medium">
                                                        {kpi.name}
                                                        <InfoButton
                                                            title={kpi.name}
                                                            help={kpi.help}
                                                            direction={
                                                                kpi.direction
                                                            }
                                                        />
                                                    </p>
                                                    <p className="text-muted-foreground">
                                                        {kpi.meta}
                                                    </p>
                                                </div>
                                                <div className="text-right">
                                                    <p className="font-semibold tabular-nums">
                                                        {kpi.display ??
                                                            'No data'}
                                                    </p>
                                                    <p className="text-muted-foreground tabular-nums">
                                                        wt {kpi.weight}%
                                                    </p>
                                                </div>
                                            </li>
                                        ))}
                                    </ul>
                                )}
                            </>
                        )}
                    </article>
                );
            })}
        </div>
    );
}