import { EmptyTab, SimpleTable } from './shared';
import type { TenantUsage } from './types';

export default function UsageTab({ usage }: { usage: TenantUsage }) {
    return (
        <>
            <div className="bg-card border-border overflow-hidden rounded-xl border">
                <div className="border-border border-b px-6 py-4">
                    <h2 className="text-foreground text-sm font-semibold">
                        Usage Meters
                    </h2>
                </div>
                {usage.meters.length > 0 ? (
                    <SimpleTable
                        headers={['Period', 'API Calls', 'SMS', 'Storage (GB)']}
                    >
                        {usage.meters.map((m) => (
                            <tr
                                key={`${m.period}-${m.period_type}`}
                                className="hover:bg-muted/30 transition-colors"
                            >
                                <td className="text-foreground px-6 py-3 text-xs font-medium tabular-nums">
                                    {m.period}
                                    <span className="text-muted-foreground ml-1.5 font-normal">
                                        ({m.period_type})
                                    </span>
                                </td>
                                <td className="text-foreground/80 px-6 py-3 text-xs tabular-nums">
                                    {m.api_calls_count.toLocaleString()}
                                </td>
                                <td className="text-foreground/80 px-6 py-3 text-xs tabular-nums">
                                    {m.sms_count.toLocaleString()}
                                </td>
                                <td className="text-foreground/80 px-6 py-3 text-xs tabular-nums">
                                    {m.storage_gb.toLocaleString()}
                                </td>
                            </tr>
                        ))}
                    </SimpleTable>
                ) : (
                    <EmptyTab text="No usage recorded yet." />
                )}
            </div>

            <div className="grid gap-6 lg:grid-cols-2">
                <div className="bg-card border-border rounded-xl border p-6">
                    <h2 className="text-foreground mb-4 text-sm font-semibold">
                        Limit Overrides
                    </h2>
                    {usage.limit_override ? (
                        <div className="space-y-2">
                            {usage.limit_override.limits.map((l) => (
                                <div
                                    key={l.label}
                                    className="flex items-center justify-between"
                                >
                                    <span className="text-muted-foreground text-xs">
                                        {l.label}
                                    </span>
                                    <span className="text-foreground text-xs font-medium tabular-nums">
                                        {l.value}
                                    </span>
                                </div>
                            ))}
                            {usage.limit_override.reason && (
                                <p className="text-muted-foreground border-border border-t pt-2 text-[11px]">
                                    {usage.limit_override.reason}
                                </p>
                            )}
                        </div>
                    ) : (
                        <p className="text-muted-foreground py-4 text-center text-sm">
                            No overrides — plan limits apply.
                        </p>
                    )}
                </div>

                <div className="bg-card border-border rounded-xl border p-6">
                    <h2 className="text-foreground mb-4 text-sm font-semibold">
                        Module Overrides
                    </h2>
                    {usage.module_overrides.length > 0 ? (
                        <div className="space-y-2">
                            {usage.module_overrides.map((o, i) => (
                                <div
                                    key={i}
                                    className="flex items-center justify-between gap-2"
                                >
                                    <span className="text-foreground min-w-0 truncate text-xs">
                                        {o.module ? `${o.module} · ` : ''}
                                        {o.sub_module}
                                    </span>
                                    <span
                                        className={`rounded-full px-2 py-0.5 text-[10px] font-semibold ${
                                            o.is_enabled
                                                ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
                                                : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
                                        }`}
                                    >
                                        {o.is_enabled ? 'enabled' : 'disabled'}
                                    </span>
                                </div>
                            ))}
                        </div>
                    ) : (
                        <p className="text-muted-foreground py-4 text-center text-sm">
                            No overrides — plan modules apply.
                        </p>
                    )}
                </div>
            </div>
        </>
    );
}