import { A } from '@solidjs/router';
import { createMemo, createResource, For, Show } from 'solid-js';

const API = '/api/gateway';

type RoleTemplate = {
  id: string;
  name: string;
  description?: string;
  code?: string;
  audience?: string;
};

async function fetchTemplates(): Promise<RoleTemplate[]> {
  try {
    const res = await fetch(`${API}/api/admin/roles?audience=INTERNAL`);
    if (!res.ok) return [];
    const data = await res.json();
    const rows = Array.isArray(data) ? data : (data.roles || []);
    return rows.map((r: any) => ({
      id: r.id,
      name: r.name,
      description: r.description || '',
      code: r.code || r.key || '',
      audience: r.audience || 'INTERNAL',
    }));
  } catch {
    return [];
  }
}

export default function RoleTemplatesPage() {
  const [templates] = createResource(fetchTemplates);
  const count = createMemo(() => (templates() || []).length);

  return (
      <div class="flex flex-col -mx-6 -mt-6 min-h-full">
        <div class="bg-white border-b border-gray-200 px-6 py-4">
          <div class="flex items-center justify-between">
            <div>
              <h1 class="text-xl font-semibold text-gray-900">Role Templates</h1>
              <p class="text-sm text-gray-500 mt-0.5">Starter role presets for faster internal role creation and cloning.</p>
            </div>
            <A class="btn-primary" href="/admin/roles/create">Create Internal Role</A>
          </div>
        </div>

        <div class="flex-1 p-6">
          <div class="table-card">
            <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200">
              <h2 class="text-sm font-semibold text-gray-900">Available Templates</h2>
              <span class="text-xs text-slate-500">{count()} template{count() !== 1 ? 's' : ''}</span>
            </div>
            <div class="overflow-x-auto">
              <table data-table class="w-full text-sm">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Code</th>
                    <th class="text-right">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  <Show when={templates.loading}>
                    <tr><td colspan="4" class="text-center px-8 py-8 text-slate-500">Loading templates...</td></tr>
                  </Show>
                  <Show when={!templates.loading && count() === 0}>
                    <tr><td colspan="4" class="text-center px-8 py-8 text-slate-400">No templates available yet.</td></tr>
                  </Show>
                  <Show when={!templates.loading && count() > 0}>
                    <For each={templates()}>
                      {(item) => (
                        <tr class="hover:bg-slate-50">
                          <td class="font-semibold text-slate-900">{item.name}</td>
                          <td class="text-slate-500">{item.description || '—'}</td>
                          <td class="text-slate-500 font-mono">{item.code || '—'}</td>
                          <td>
                            <div class="flex items-center justify-end gap-1">
                              <A class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href={`/admin/roles/${item.id}`}>View</A>
                              <A class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href="/admin/roles/create">Use As Base</A>
                            </div>
                          </td>
                        </tr>
                      )}
                    </For>
                  </Show>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
  );
}