import type { DocBlock } from '@/lib/docs-pages';
import { OAuthCodeTabs } from '@/components/oauth-code-tabs';
import { AuthLoginCodeTabs } from '@/components/auth-code-tabs';
import { AuthLdapCodeTabs } from '@/components/auth-ldap-code-tabs';
import { ApiReferenceSection } from '@/components/api-endpoint-card';
import { CodeBlock } from '@/components/code-block';
import { cn } from '@/lib/utils';

function Callout({ variant, title, text }: { variant: 'info' | 'warning' | 'tip'; title: string; text: string }) {
  const styles = {
    info: 'border-blue-200 bg-blue-50 dark:border-blue-900 dark:bg-blue-950/40',
    warning: 'border-amber-200 bg-amber-50 dark:border-amber-900 dark:bg-amber-950/40',
    tip: 'border-emerald-200 bg-emerald-50 dark:border-emerald-900 dark:bg-emerald-950/40'
  };

  return (
    <div className={cn('my-4 rounded-xl border p-4', styles[variant])}>
      <p className="font-semibold">{title}</p>
      <p className="mt-1 text-sm leading-relaxed text-zinc-600 dark:text-zinc-300">{text}</p>
    </div>
  );
}

export function DocBlockRenderer({ block }: { block: DocBlock }) {
  switch (block.type) {
    case 'paragraph':
      return <p className="leading-7 text-zinc-600 dark:text-zinc-300">{block.text}</p>;
    case 'list':
      return (
        <ul className="my-4 list-disc space-y-2 pl-6 leading-7 text-zinc-600 dark:text-zinc-300">
          {block.items.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      );
    case 'code':
      return <CodeBlock code={block.code} language={block.language} title={block.title} />;
    case 'callout':
      return <Callout variant={block.variant} title={block.title} text={block.text} />;
    case 'table':
      return (
        <div className="my-4 overflow-x-auto rounded-xl border border-zinc-200 dark:border-zinc-800">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900">
                {block.headers.map((header) => (
                  <th key={header} className="px-4 py-3 text-left font-semibold">
                    {header}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {block.rows.map((row, index) => (
                <tr key={index} className="border-b border-zinc-100 last:border-0 dark:border-zinc-800">
                  {row.map((cell, cellIndex) => (
                    <td key={cellIndex} className="px-4 py-3 align-top text-zinc-600 dark:text-zinc-300">
                      {cell}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      );
    case 'oauth-examples':
      return <OAuthCodeTabs />;
    case 'auth-login-examples':
      return <AuthLoginCodeTabs />;
    case 'auth-ldap-examples':
      return <AuthLdapCodeTabs />;
    case 'api-reference':
      return <ApiReferenceSection />;
    default:
      return null;
  }
}