import { cn } from '@/lib/utils';
import { CheckCircle2, Minus } from 'lucide-react';
import { Fragment } from 'react';
import FadeUp from './FadeUp';
import {
    featureColumns,
    featureRows,
    isPlanKey,
    presentation,
    type DbPlan,
    type FeatureValue,
    type PlanKey,
} from './plan-data';

function FeatureCell({
    value,
    isHighlight,
}: {
    value: FeatureValue;
    isHighlight?: boolean;
}) {
    if (value === true)
        return (
            <CheckCircle2
                className={cn(
                    'mx-auto h-4 w-4',
                    isHighlight ? 'text-primary' : 'text-primary/55',
                )}
            />
        );
    if (value === false)
        return <Minus className="text-border mx-auto h-4 w-4" />;
    return (
        <span
            className={cn(
                'pf-mono text-[10px]',
                isHighlight
                    ? 'text-primary font-semibold'
                    : 'text-muted-foreground',
            )}
        >
            {value}
        </span>
    );
}

export default function ComparisonTable({ plans }: { plans: DbPlan[] }) {
    // Comparison-table columns follow the DB plan order; the feature values
    // themselves are static marketing copy keyed by the well-known slugs.
    const dbColumns = plans
        .filter((p) => isPlanKey(p.slug))
        .map((p) => ({ slug: p.slug as PlanKey, name: p.name }));
    const columns = dbColumns.length > 0 ? dbColumns : featureColumns;

    return (
        <section className="pf-section">
            <div className="pf-container">
                <FadeUp className="mb-12 text-center">
                    <h2 className="pf-display text-foreground text-3xl font-bold">
                        Everything included
                    </h2>
                </FadeUp>
                <FadeUp>
                    <div className="pf-card overflow-hidden overflow-x-auto p-0">
                        <table className="w-full min-w-[640px] text-sm">
                            <thead>
                                <tr className="border-border bg-primary/[0.04] border-b">
                                    <th className="text-muted-foreground p-4 text-left text-[10px] font-bold tracking-widest uppercase">
                                        Feature
                                    </th>
                                    {columns.map((col) => (
                                        <th
                                            key={col.slug}
                                            className={cn(
                                                'p-4 text-center text-[10px] font-bold tracking-wider uppercase',
                                                presentation(col.slug).highlight
                                                    ? 'text-primary'
                                                    : 'text-muted-foreground',
                                            )}
                                        >
                                            {col.name}
                                        </th>
                                    ))}
                                </tr>
                            </thead>
                            <tbody>
                                {featureRows.map((cat) => (
                                    <Fragment key={cat.category}>
                                        <tr className="border-border bg-primary/[0.03] border-b">
                                            <td
                                                colSpan={columns.length + 1}
                                                className="text-primary px-4 py-2.5 text-[10px] font-bold tracking-widest uppercase"
                                            >
                                                {cat.category}
                                            </td>
                                        </tr>
                                        {cat.rows.map((row) => (
                                            <tr
                                                key={row.feature}
                                                className="border-border/50 hover:bg-primary/[0.03] border-b transition-colors last:border-0"
                                            >
                                                <td className="text-muted-foreground px-4 py-3 text-xs">
                                                    {row.feature}
                                                </td>
                                                {columns.map((col) => (
                                                    <td
                                                        key={col.slug}
                                                        className={cn(
                                                            'px-4 py-3 text-center',
                                                            col.slug ===
                                                                'professional' &&
                                                                'bg-primary/[0.025]',
                                                        )}
                                                    >
                                                        <FeatureCell
                                                            value={
                                                                row[col.slug]
                                                            }
                                                            isHighlight={
                                                                col.slug ===
                                                                'professional'
                                                            }
                                                        />
                                                    </td>
                                                ))}
                                            </tr>
                                        ))}
                                    </Fragment>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </FadeUp>
            </div>
        </section>
    );
}