'use client';

import { useCallback, useEffect, useState } from 'react';
import { api } from '@/lib/api';
import { authClient, useSession } from '@/lib/auth-client';
import type { SsoProviderDiscovery } from '@/lib/sso';
import { SsoProviderSection } from '@/components/settings/sso-provider-section';

// ─── Types ────────────────────────────────────────────────────────────────────

interface ModelInfo {
  id: string;
  provider: string;
  name: string;
  reasoning: boolean;
  contextWindow: number;
  maxTokens: number;
  inputTypes: ('text' | 'image')[];
  cost: { input: number; output: number; cacheRead: number; cacheWrite: number };
}

interface ProviderInfo {
  id: string;
  name: string;
  available: boolean;
  models: ModelInfo[];
}

interface TestConnectionResult {
  providerId: string;
  reachable: boolean;
  latencyMs?: number;
  error?: string;
  discoveredModels?: string[];
}

type TestState = 'idle' | 'testing' | 'success' | 'error';

interface ProviderTestStatus {
  state: TestState;
  result?: TestConnectionResult;
}

interface Preference {
  key: string;
  value: unknown;
  category: string;
}

type Theme = 'light' | 'dark' | 'system';
type SaveState = 'idle' | 'saving' | 'saved' | 'error';
type Tab = 'profile' | 'appearance' | 'notifications' | 'providers';

// ─── Helpers ──────────────────────────────────────────────────────────────────

function prefValue<T>(prefs: Preference[], key: string, fallback: T): T {
  const p = prefs.find((x) => x.key === key);
  if (p === undefined) return fallback;
  return p.value as T;
}

// ─── Main Page ────────────────────────────────────────────────────────────────

export default function SettingsPage(): React.ReactElement {
  const { data: session } = useSession();
  const [activeTab, setActiveTab] = useState<Tab>('profile');

  const tabs: { id: Tab; label: string }[] = [
    { id: 'profile', label: 'Profile' },
    { id: 'appearance', label: 'Appearance' },
    { id: 'notifications', label: 'Notifications' },
    { id: 'providers', label: 'Providers' },
  ];

  return (
    <div className="mx-auto max-w-3xl space-y-6">
      <h1 className="text-2xl font-semibold">Settings</h1>

      {/* Tab bar */}
      <div className="flex gap-1 border-b border-surface-border">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            type="button"
            onClick={() => setActiveTab(tab.id)}
            className={`px-4 py-2 text-sm font-medium transition-colors ${
              activeTab === tab.id
                ? 'border-b-2 border-accent text-accent'
                : 'text-text-secondary hover:text-text-primary'
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {activeTab === 'profile' && <ProfileTab session={session} />}
      {activeTab === 'appearance' && <AppearanceTab />}
      {activeTab === 'notifications' && <NotificationsTab />}
      {activeTab === 'providers' && <ProvidersTab />}
    </div>
  );
}

// ─── Profile Tab ──────────────────────────────────────────────────────────────

function ProfileTab({
  session,
}: {
  session: { user: { id: string; name: string; email: string; image?: string | null } } | null;
}): React.ReactElement {
  const [name, setName] = useState(session?.user.name ?? '');
  const [image, setImage] = useState(session?.user.image ?? '');
  const [saveState, setSaveState] = useState<SaveState>('idle');
  const [errorMsg, setErrorMsg] = useState('');

  // Sync from session when it loads
  useEffect(() => {
    if (session?.user) {
      setName(session.user.name ?? '');
      setImage(session.user.image ?? '');
    }
  }, [session]);

  const handleSave = async (): Promise<void> => {
    setSaveState('saving');
    setErrorMsg('');
    try {
      const result = await authClient.updateUser({ name, image: image || null });
      if (result.error) {
        setErrorMsg(result.error.message ?? 'Failed to update profile');
        setSaveState('error');
        return;
      }
      setSaveState('saved');
      setTimeout(() => setSaveState('idle'), 2000);
    } catch (err: unknown) {
      const message = err instanceof Error ? err.message : 'Failed to update profile';
      setErrorMsg(message);
      setSaveState('error');
    }
  };

  return (
    <section className="space-y-4">
      <h2 className="text-lg font-medium text-text-secondary">Profile</h2>
      <div className="rounded-lg border border-surface-border bg-surface-card p-6 space-y-4">
        <FormField label="Display Name" id="profile-name">
          <input
            id="profile-name"
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Your name"
            className="mt-1 block w-full rounded-lg border border-surface-border bg-surface-elevated px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent"
          />
        </FormField>

        <FormField label="Email" id="profile-email">
          <input
            id="profile-email"
            type="email"
            value={session?.user.email ?? ''}
            disabled
            className="mt-1 block w-full rounded-lg border border-surface-border bg-surface-elevated px-3 py-2 text-sm text-text-muted opacity-60 cursor-not-allowed"
          />
          <p className="mt-1 text-xs text-text-muted">Email cannot be changed here.</p>
        </FormField>

        <FormField label="Avatar URL" id="profile-image">
          <input
            id="profile-image"
            type="url"
            value={image}
            onChange={(e) => setImage(e.target.value)}
            placeholder="https://example.com/avatar.png"
            className="mt-1 block w-full rounded-lg border border-surface-border bg-surface-elevated px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent"
          />
        </FormField>

        <div className="flex items-center gap-3 pt-2">
          <SaveButton state={saveState} onClick={handleSave} />
          {saveState === 'error' && errorMsg && <p className="text-sm text-error">{errorMsg}</p>}
        </div>
      </div>
    </section>
  );
}

// ─── Appearance Tab ───────────────────────────────────────────────────────────

function AppearanceTab(): React.ReactElement {
  const [loading, setLoading] = useState(true);
  const [theme, setTheme] = useState<Theme>('system');
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
  const [defaultModel, setDefaultModel] = useState('');
  const [saveState, setSaveState] = useState<SaveState>('idle');
  const [errorMsg, setErrorMsg] = useState('');

  useEffect(() => {
    api<Preference[]>('/api/memory/preferences?category=appearance')
      .catch(() => [] as Preference[])
      .then((p) => {
        setTheme(prefValue<Theme>(p, 'ui.theme', 'system'));
        setSidebarCollapsed(prefValue<boolean>(p, 'ui.sidebar_collapsed', false));
        setDefaultModel(prefValue<string>(p, 'ui.default_model', ''));
      })
      .finally(() => setLoading(false));
  }, []);

  const handleSave = async (): Promise<void> => {
    setSaveState('saving');
    setErrorMsg('');
    try {
      await Promise.all([
        api('/api/memory/preferences', {
          method: 'POST',
          body: { key: 'ui.theme', value: theme, category: 'appearance', source: 'user' },
        }),
        api('/api/memory/preferences', {
          method: 'POST',
          body: {
            key: 'ui.sidebar_collapsed',
            value: sidebarCollapsed,
            category: 'appearance',
            source: 'user',
          },
        }),
        ...(defaultModel
          ? [
              api('/api/memory/preferences', {
                method: 'POST',
                body: {
                  key: 'ui.default_model',
                  value: defaultModel,
                  category: 'appearance',
                  source: 'user',
                },
              }),
            ]
          : []),
      ]);
      setSaveState('saved');
      setTimeout(() => setSaveState('idle'), 2000);
    } catch (err: unknown) {
      const message = err instanceof Error ? err.message : 'Failed to save preferences';
      setErrorMsg(message);
      setSaveState('error');
    }
  };

  if (loading) {
    return (
      <section>
        <h2 className="mb-4 text-lg font-medium text-text-secondary">Appearance</h2>
        <p className="text-sm text-text-muted">Loading preferences...</p>
      </section>
    );
  }

  return (
    <section className="space-y-4">
      <h2 className="text-lg font-medium text-text-secondary">Appearance</h2>
      <div className="rounded-lg border border-surface-border bg-surface-card p-6 space-y-6">
        {/* Theme */}
        <div>
          <label className="block text-sm font-medium text-text-primary mb-2">Theme</label>
          <div className="flex gap-3">
            {(['system', 'light', 'dark'] as Theme[]).map((t) => (
              <button
                key={t}
                type="button"
                onClick={() => setTheme(t)}
                className={`rounded-lg border px-4 py-2 text-sm capitalize transition-colors ${
                  theme === t
                    ? 'border-accent bg-accent/10 text-accent'
                    : 'border-surface-border bg-surface-elevated text-text-secondary hover:border-accent/50'
                }`}
              >
                {t}
              </button>
            ))}
          </div>
        </div>

        {/* Sidebar collapsed default */}
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm font-medium text-text-primary">Collapse sidebar by default</p>
            <p className="text-xs text-text-muted">Start with sidebar collapsed on page load</p>
          </div>
          <Toggle checked={sidebarCollapsed} onChange={setSidebarCollapsed} />
        </div>

        {/* Default model */}
        <FormField label="Default Model" id="default-model">
          <input
            id="default-model"
            type="text"
            value={defaultModel}
            onChange={(e) => setDefaultModel(e.target.value)}
            placeholder="e.g. ollama/llama3.2"
            className="mt-1 block w-full rounded-lg border border-surface-border bg-surface-elevated px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent"
          />
          <p className="mt-1 text-xs text-text-muted">
            Model ID to pre-select for new conversations.
          </p>
        </FormField>

        <div className="flex items-center gap-3 pt-2">
          <SaveButton state={saveState} onClick={handleSave} />
          {saveState === 'error' && errorMsg && <p className="text-sm text-error">{errorMsg}</p>}
        </div>
      </div>
    </section>
  );
}

// ─── Notifications Tab ────────────────────────────────────────────────────────

function NotificationsTab(): React.ReactElement {
  const [loading, setLoading] = useState(true);
  const [emailAgentComplete, setEmailAgentComplete] = useState(false);
  const [emailMentions, setEmailMentions] = useState(true);
  const [emailDigest, setEmailDigest] = useState(false);
  const [saveState, setSaveState] = useState<SaveState>('idle');
  const [errorMsg, setErrorMsg] = useState('');

  useEffect(() => {
    api<Preference[]>('/api/memory/preferences?category=communication')
      .catch(() => [] as Preference[])
      .then((p) => {
        setEmailAgentComplete(prefValue<boolean>(p, 'notify.email_agent_complete', false));
        setEmailMentions(prefValue<boolean>(p, 'notify.email_mentions', true));
        setEmailDigest(prefValue<boolean>(p, 'notify.email_digest', false));
      })
      .finally(() => setLoading(false));
  }, []);

  const handleSave = async (): Promise<void> => {
    setSaveState('saving');
    setErrorMsg('');
    try {
      await Promise.all([
        api('/api/memory/preferences', {
          method: 'POST',
          body: {
            key: 'notify.email_agent_complete',
            value: emailAgentComplete,
            category: 'communication',
            source: 'user',
          },
        }),
        api('/api/memory/preferences', {
          method: 'POST',
          body: {
            key: 'notify.email_mentions',
            value: emailMentions,
            category: 'communication',
            source: 'user',
          },
        }),
        api('/api/memory/preferences', {
          method: 'POST',
          body: {
            key: 'notify.email_digest',
            value: emailDigest,
            category: 'communication',
            source: 'user',
          },
        }),
      ]);
      setSaveState('saved');
      setTimeout(() => setSaveState('idle'), 2000);
    } catch (err: unknown) {
      const message = err instanceof Error ? err.message : 'Failed to save preferences';
      setErrorMsg(message);
      setSaveState('error');
    }
  };

  if (loading) {
    return (
      <section>
        <h2 className="mb-4 text-lg font-medium text-text-secondary">Notifications</h2>
        <p className="text-sm text-text-muted">Loading preferences...</p>
      </section>
    );
  }

  return (
    <section className="space-y-4">
      <h2 className="text-lg font-medium text-text-secondary">Notifications</h2>
      <div className="rounded-lg border border-surface-border bg-surface-card p-6 space-y-6">
        <p className="text-xs text-text-muted">Configure when you receive email notifications.</p>

        <NotifyRow
          label="Agent task completed"
          description="Email when an agent finishes a task"
          checked={emailAgentComplete}
          onChange={setEmailAgentComplete}
        />
        <NotifyRow
          label="Mentions"
          description="Email when you are mentioned in a conversation"
          checked={emailMentions}
          onChange={setEmailMentions}
        />
        <NotifyRow
          label="Weekly digest"
          description="Weekly summary of activity"
          checked={emailDigest}
          onChange={setEmailDigest}
        />

        <div className="flex items-center gap-3 pt-2">
          <SaveButton state={saveState} onClick={handleSave} />
          {saveState === 'error' && errorMsg && <p className="text-sm text-error">{errorMsg}</p>}
        </div>
      </div>
    </section>
  );
}

// ─── Providers Tab ────────────────────────────────────────────────────────────

function ProvidersTab(): React.ReactElement {
  const [providers, setProviders] = useState<ProviderInfo[]>([]);
  const [ssoProviders, setSsoProviders] = useState<SsoProviderDiscovery[]>([]);
  const [loading, setLoading] = useState(true);
  const [ssoLoading, setSsoLoading] = useState(true);
  const [testStatuses, setTestStatuses] = useState<Record<string, ProviderTestStatus>>({});

  useEffect(() => {
    api<ProviderInfo[]>('/api/providers')
      .catch(() => [] as ProviderInfo[])
      .then((p) => setProviders(p))
      .finally(() => setLoading(false));
  }, []);

  useEffect(() => {
    api<SsoProviderDiscovery[]>('/api/sso/providers')
      .catch(() => [] as SsoProviderDiscovery[])
      .then((providers) => setSsoProviders(providers))
      .finally(() => setSsoLoading(false));
  }, []);

  const testConnection = useCallback(async (providerId: string): Promise<void> => {
    setTestStatuses((prev) => ({
      ...prev,
      [providerId]: { state: 'testing' },
    }));
    try {
      const result = await api<TestConnectionResult>('/api/providers/test', {
        method: 'POST',
        body: { providerId },
      });
      setTestStatuses((prev) => ({
        ...prev,
        [providerId]: { state: result.reachable ? 'success' : 'error', result },
      }));
    } catch {
      setTestStatuses((prev) => ({
        ...prev,
        [providerId]: {
          state: 'error',
          result: { providerId, reachable: false, error: 'Request failed' },
        },
      }));
    }
  }, []);

  const defaultModel: ModelInfo | undefined = providers
    .flatMap((p) => p.models)
    .find((m) => providers.find((p) => p.id === m.provider)?.available);

  return (
    <section className="space-y-6">
      <div className="space-y-4">
        <h2 className="text-lg font-medium text-text-secondary">SSO Providers</h2>
        <SsoProviderSection providers={ssoProviders} loading={ssoLoading} />
      </div>

      <div className="space-y-4">
        <h2 className="text-lg font-medium text-text-secondary">LLM Providers</h2>
        {loading ? (
          <p className="text-sm text-text-muted">Loading providers...</p>
        ) : providers.length === 0 ? (
          <div className="rounded-lg border border-surface-border bg-surface-card p-4">
            <p className="text-sm text-text-muted">
              No providers configured. Set{' '}
              <code className="rounded bg-surface-elevated px-1 py-0.5 text-xs">
                OLLAMA_BASE_URL
              </code>{' '}
              or{' '}
              <code className="rounded bg-surface-elevated px-1 py-0.5 text-xs">
                MOSAIC_CUSTOM_PROVIDERS
              </code>{' '}
              to add providers.
            </p>
          </div>
        ) : (
          <div className="space-y-4">
            {providers.map((provider) => (
              <ProviderCard
                key={provider.id}
                provider={provider}
                defaultModel={defaultModel}
                testStatus={testStatuses[provider.id] ?? { state: 'idle' }}
                onTest={() => void testConnection(provider.id)}
              />
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

// ─── Shared UI Components ─────────────────────────────────────────────────────

function FormField({
  label,
  id,
  children,
}: {
  label: string;
  id: string;
  children: React.ReactNode;
}): React.ReactElement {
  return (
    <div>
      <label htmlFor={id} className="block text-sm font-medium text-text-primary">
        {label}
      </label>
      {children}
    </div>
  );
}

function Toggle({
  checked,
  onChange,
}: {
  checked: boolean;
  onChange: (v: boolean) => void;
}): React.ReactElement {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      onClick={() => onChange(!checked)}
      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 focus:ring-offset-surface-card ${
        checked ? 'bg-accent' : 'bg-surface-border'
      }`}
    >
      <span
        className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
          checked ? 'translate-x-6' : 'translate-x-1'
        }`}
      />
    </button>
  );
}

function NotifyRow({
  label,
  description,
  checked,
  onChange,
}: {
  label: string;
  description: string;
  checked: boolean;
  onChange: (v: boolean) => void;
}): React.ReactElement {
  return (
    <div className="flex items-center justify-between">
      <div>
        <p className="text-sm font-medium text-text-primary">{label}</p>
        <p className="text-xs text-text-muted">{description}</p>
      </div>
      <Toggle checked={checked} onChange={onChange} />
    </div>
  );
}

function SaveButton({
  state,
  onClick,
}: {
  state: SaveState;
  onClick: () => void;
}): React.ReactElement {
  return (
    <button
      type="button"
      onClick={onClick}
      disabled={state === 'saving'}
      className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent/90 disabled:cursor-not-allowed disabled:opacity-50"
    >
      {state === 'saving' ? 'Saving...' : state === 'saved' ? 'Saved!' : 'Save changes'}
    </button>
  );
}

// ─── Provider Card (from original page) ──────────────────────────────────────

interface ProviderCardProps {
  provider: ProviderInfo;
  defaultModel: ModelInfo | undefined;
  testStatus: ProviderTestStatus;
  onTest: () => void;
}

function ProviderCard({
  provider,
  defaultModel,
  testStatus,
  onTest,
}: ProviderCardProps): React.ReactElement {
  const [expanded, setExpanded] = useState(false);

  return (
    <div className="rounded-lg border border-surface-border bg-surface-card">
      {/* Header row */}
      <div className="flex items-center justify-between px-4 py-3">
        <div className="flex items-center gap-3">
          <ProviderAvatar id={provider.id} />
          <div>
            <div className="flex items-center gap-2">
              <span className="text-sm font-medium text-text-primary">{provider.name}</span>
              <ProviderStatusBadge available={provider.available} />
            </div>
            <p className="text-xs text-text-muted">
              {provider.models.length} model{provider.models.length !== 1 ? 's' : ''}
            </p>
          </div>
        </div>

        <div className="flex items-center gap-2">
          <TestConnectionButton status={testStatus} onTest={onTest} />
          <button
            type="button"
            onClick={() => setExpanded((v) => !v)}
            className="rounded px-2 py-1 text-xs text-text-muted transition-colors hover:bg-surface-elevated hover:text-text-primary"
            aria-expanded={expanded}
            aria-label={expanded ? 'Collapse models' : 'Expand models'}
          >
            {expanded ? '▲ Hide' : '▼ Models'}
          </button>
        </div>
      </div>

      {/* Test result banner */}
      {testStatus.state !== 'idle' && testStatus.state !== 'testing' && testStatus.result && (
        <TestResultBanner result={testStatus.result} />
      )}

      {/* Model list */}
      {expanded && (
        <div className="border-t border-surface-border">
          <table className="w-full">
            <thead>
              <tr className="bg-surface-elevated text-left text-xs text-text-muted">
                <th className="px-4 py-2 font-medium">Model</th>
                <th className="hidden px-4 py-2 font-medium md:table-cell">Capabilities</th>
                <th className="hidden px-4 py-2 font-medium md:table-cell">Context</th>
                <th className="hidden px-4 py-2 font-medium md:table-cell">Cost (in/out)</th>
                <th className="px-4 py-2 font-medium">Default</th>
              </tr>
            </thead>
            <tbody>
              {provider.models.map((model) => (
                <ModelRow
                  key={model.id}
                  model={model}
                  isDefault={
                    defaultModel?.id === model.id && defaultModel?.provider === model.provider
                  }
                />
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

interface ModelRowProps {
  model: ModelInfo;
  isDefault: boolean;
}

function ModelRow({ model, isDefault }: ModelRowProps): React.ReactElement {
  return (
    <tr className="border-t border-surface-border">
      <td className="px-4 py-2">
        <span className="text-sm text-text-primary">{model.name}</span>
      </td>
      <td className="hidden px-4 py-2 md:table-cell">
        <div className="flex flex-wrap gap-1">
          <CapabilityBadge label="chat" />
          {model.reasoning && <CapabilityBadge label="reasoning" color="purple" />}
          {model.inputTypes.includes('image') && <CapabilityBadge label="vision" color="blue" />}
        </div>
      </td>
      <td className="hidden px-4 py-2 text-xs text-text-muted md:table-cell">
        {formatContext(model.contextWindow)}
      </td>
      <td className="hidden px-4 py-2 text-xs text-text-muted md:table-cell">
        {model.cost.input === 0 && model.cost.output === 0
          ? 'free'
          : `$${model.cost.input} / $${model.cost.output}`}
      </td>
      <td className="px-4 py-2 text-center">
        {isDefault && (
          <span
            className="inline-block rounded-full bg-accent/20 px-2 py-0.5 text-xs font-medium text-accent"
            title="Default model used for new sessions"
          >
            default
          </span>
        )}
      </td>
    </tr>
  );
}

function ProviderAvatar({ id }: { id: string }): React.ReactElement {
  const letter = id.charAt(0).toUpperCase();
  return (
    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-surface-elevated text-sm font-semibold text-text-secondary">
      {letter}
    </div>
  );
}

function ProviderStatusBadge({ available }: { available: boolean }): React.ReactElement {
  return (
    <span
      className={`rounded-full px-2 py-0.5 text-xs font-medium ${
        available ? 'bg-success/20 text-success' : 'bg-surface-elevated text-text-muted'
      }`}
    >
      {available ? 'Active' : 'Inactive'}
    </span>
  );
}

interface TestConnectionButtonProps {
  status: ProviderTestStatus;
  onTest: () => void;
}

function TestConnectionButton({ status, onTest }: TestConnectionButtonProps): React.ReactElement {
  const isTesting = status.state === 'testing';
  return (
    <button
      type="button"
      onClick={onTest}
      disabled={isTesting}
      className="rounded px-2 py-1 text-xs transition-colors hover:bg-surface-elevated disabled:cursor-not-allowed disabled:opacity-50"
      title="Test connection"
    >
      {isTesting ? (
        <span className="text-text-muted">Testing…</span>
      ) : status.state === 'success' ? (
        <span className="text-success">✓ Reachable</span>
      ) : status.state === 'error' ? (
        <span className="text-error">✗ Unreachable</span>
      ) : (
        <span className="text-text-muted">Test</span>
      )}
    </button>
  );
}

function TestResultBanner({ result }: { result: TestConnectionResult }): React.ReactElement {
  return (
    <div
      className={`px-4 py-2 text-xs ${
        result.reachable ? 'bg-success/10 text-success' : 'bg-error/10 text-error'
      }`}
    >
      {result.reachable ? (
        <>
          Connected
          {result.latencyMs !== undefined && (
            <span className="ml-1 opacity-70">({result.latencyMs}ms)</span>
          )}
          {result.discoveredModels && result.discoveredModels.length > 0 && (
            <span className="ml-2 opacity-70">
              — {result.discoveredModels.length} model
              {result.discoveredModels.length !== 1 ? 's' : ''} discovered
            </span>
          )}
        </>
      ) : (
        <>Connection failed{result.error ? `: ${result.error}` : ''}</>
      )}
    </div>
  );
}

function CapabilityBadge({
  label,
  color = 'default',
}: {
  label: string;
  color?: 'default' | 'purple' | 'blue';
}): React.ReactElement {
  const colorClass =
    color === 'purple'
      ? 'bg-purple-500/20 text-purple-400'
      : color === 'blue'
        ? 'bg-blue-500/20 text-blue-400'
        : 'bg-surface-elevated text-text-muted';
  return <span className={`rounded px-1.5 py-0.5 text-xs ${colorClass}`}>{label}</span>;
}

function formatContext(tokens: number): string {
  if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(1)}M`;
  if (tokens >= 1_000) return `${Math.round(tokens / 1_000)}k`;
  return String(tokens);
}