import useSWR from 'swr';
import { api } from '../lib/api';

export default function Settings() {
  const { data: org } = useSWR('org', api.getOrg);

  return (
    <div className="space-y-6">
      <h2 className="text-xl font-semibold">Settings</h2>

      {/* Org info */}
      <div className="bg-dd0c-surface border border-dd0c-border rounded-lg p-4 space-y-3">
        <h3 className="text-sm font-medium text-dd0c-muted">Organization</h3>
        <div className="grid grid-cols-2 gap-4 text-sm">
          <div>
            <p className="text-xs text-dd0c-muted">Name</p>
            <p>{org?.name ?? '—'}</p>
          </div>
          <div>
            <p className="text-xs text-dd0c-muted">Slug</p>
            <p className="font-mono">{org?.slug ?? '—'}</p>
          </div>
          <div>
            <p className="text-xs text-dd0c-muted">Tier</p>
            <p>
              <span className="px-2 py-0.5 rounded text-xs bg-dd0c-primary/20 text-dd0c-primary uppercase">
                {org?.tier ?? '—'}
              </span>
            </p>
          </div>
          <div>
            <p className="text-xs text-dd0c-muted">ID</p>
            <p className="font-mono text-xs text-dd0c-muted">{org?.id ?? '—'}</p>
          </div>
        </div>
      </div>

      {/* Provider configs */}
      <div className="bg-dd0c-surface border border-dd0c-border rounded-lg p-4 space-y-3">
        <h3 className="text-sm font-medium text-dd0c-muted">Providers</h3>
        <p className="text-xs text-dd0c-muted">
          Configure your LLM provider API keys. Keys are encrypted at rest.
        </p>
        <div className="space-y-2">
          <ProviderRow name="OpenAI" provider="openai" />
          <ProviderRow name="Anthropic" provider="anthropic" />
        </div>
      </div>

      {/* Danger zone */}
      <div className="bg-dd0c-surface border border-dd0c-danger/30 rounded-lg p-4 space-y-3">
        <h3 className="text-sm font-medium text-dd0c-danger">Danger Zone</h3>
        <button className="px-3 py-1.5 border border-dd0c-danger/50 text-dd0c-danger text-sm rounded-md hover:bg-dd0c-danger/10">
          Delete Organization
        </button>
      </div>
    </div>
  );
}

function ProviderRow({ name, provider }: { name: string; provider: string }) {
  return (
    <div className="flex items-center justify-between p-3 bg-dd0c-bg rounded-md">
      <div>
        <p className="text-sm font-medium">{name}</p>
        <p className="text-xs text-dd0c-muted">{provider}</p>
      </div>
      <button className="px-3 py-1 text-xs border border-dd0c-border rounded hover:bg-dd0c-border/50 text-dd0c-muted hover:text-dd0c-text">
        Configure
      </button>
    </div>
  );
}
