import type { CurrentUser, SiteSettings } from '../../env';
import { AdminLayout } from './layout';

export function AdminLinksPage(props: {
  settings: SiteSettings;
  currentUser: CurrentUser;
  csrfToken: string;
  links: Array<{ id: string; name: string; url: string; avatar: string | null; description: string; category: string; visible: number; sort_order: number }>;
}) {
  return (
    <AdminLayout title="友链管理" settings={props.settings} currentUser={props.currentUser} csrfToken={props.csrfToken} active="/admin/links">
      <section class="admin-panel">
        <form class="admin-inline-form" data-admin-link-form>
          <input name="name" placeholder="名称" required />
          <input name="url" placeholder="URL" type="url" required />
          <input name="description" placeholder="描述" />
          <input name="category" placeholder="分类" value="default" />
          <button type="submit">添加</button>
        </form>
        <table class="admin-table">
          <thead><tr><th>名称</th><th>URL</th><th>分类</th><th>排序</th><th>操作</th></tr></thead>
          <tbody>
            {props.links.map((link) => (
              <tr data-link-id={link.id}>
                <td>{link.name}</td>
                <td><a href={link.url} target="_blank" rel="noopener noreferrer">{link.url}</a></td>
                <td>{link.category}</td>
                <td>{link.sort_order}</td>
                <td><button data-admin-action="delete-link">删除</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>
    </AdminLayout>
  );
}
