/**
 * Exposed tools card (mcp-ai-spec §6.2.4): live registry list grouped
 * read/write, annotations, collapsible parameter tables, anonymous-access
 * counts per access mode.
 */
import React, { useState } from 'react';
import { ChevronDown, ChevronUp } from 'lucide-react';
import type { McpStatus, McpToolInfo } from './types';
import { McpCard } from './card';
import { __, sprintf } from '../../lib/i18n';

export function ToolsList({ status }: { status: McpStatus }) {
  const readTools = status.tools.filter((t) => t.scope !== 'write');
  const writeTools = status.tools.filter((t) => t.scope === 'write');

  return (
    <McpCard
      title={__('Exposed tools', 'llmagnet-llm-txt-generator')}
      description={sprintf(
        __(
          '%1$d tools from the shared registry. Anonymous callers can reach %2$d in Public content mode and %3$d in Public read mode.',
          'llmagnet-llm-txt-generator',
        ),
        status.tool_counts.total,
        status.tool_counts.public_content,
        status.tool_counts.public_read,
      )}
    >
      <ToolGroup
        heading={sprintf(__('Read tools (%d)', 'llmagnet-llm-txt-generator'), readTools.length)}
        tools={readTools}
      />
      {writeTools.length > 0 && (
        <div className="mt-5">
          <ToolGroup
            heading={sprintf(__('Write tools (%d)', 'llmagnet-llm-txt-generator'), writeTools.length)}
            tools={writeTools}
          />
        </div>
      )}
    </McpCard>
  );
}

function ToolGroup({ heading, tools }: { heading: string; tools: McpToolInfo[] }) {
  return (
    <div>
      <h3 className="text-sm font-semibold text-gray-900">{heading}</h3>
      <ul className="mt-2 divide-y divide-gray-100 border border-gray-100 rounded-md">
        {tools.map((tool) => (
          <ToolRow key={tool.name} tool={tool} />
        ))}
      </ul>
    </div>
  );
}

function ToolRow({ tool }: { tool: McpToolInfo }) {
  const [open, setOpen] = useState(false);
  const params = tool.input_schema?.properties || {};
  const paramNames = Object.keys(params);
  const required = tool.input_schema?.required || [];

  return (
    <li>
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
        className="flex w-full items-start justify-between gap-3 px-3 py-2.5 text-start hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[#9333ea]"
      >
        <span className="min-w-0">
          <span className="flex flex-wrap items-center gap-2">
            <code dir="ltr" className="text-xs font-semibold text-gray-900">
              {tool.name}
            </code>
            <ScopeBadge write={tool.scope === 'write'} />
            {tool.annotations.idempotentHint && (
              <AnnotationBadge>{__('idempotent', 'llmagnet-llm-txt-generator')}</AnnotationBadge>
            )}
            {tool.annotations.destructiveHint && (
              <AnnotationBadge tone="warning">
                {__('destructive', 'llmagnet-llm-txt-generator')}
              </AnnotationBadge>
            )}
            {tool.public_eligible && (
              <AnnotationBadge tone="info">
                {tool.public_eligible === 'content'
                  ? __('public: content modes', 'llmagnet-llm-txt-generator')
                  : __('public: read mode', 'llmagnet-llm-txt-generator')}
              </AnnotationBadge>
            )}
            {tool.plan !== 'free' && <AnnotationBadge tone="plan">{tool.plan}</AnnotationBadge>}
          </span>
          <span className="mt-0.5 block text-xs text-gray-500 line-clamp-2">
            {tool.description}
          </span>
        </span>
        {open ? (
          <ChevronUp className="mt-1 h-4 w-4 flex-shrink-0 text-gray-400" aria-hidden />
        ) : (
          <ChevronDown className="mt-1 h-4 w-4 flex-shrink-0 text-gray-400" aria-hidden />
        )}
      </button>
      {open && (
        <div className="border-t border-gray-100 bg-gray-50/60 px-3 py-2.5">
          {paramNames.length === 0 ? (
            <p className="text-xs text-gray-500">
              {__('No parameters.', 'llmagnet-llm-txt-generator')}
            </p>
          ) : (
            <table className="w-full text-xs">
              <thead>
                <tr className="text-start text-gray-500">
                  <th scope="col" className="py-1 pe-3 text-start font-medium">
                    {__('Parameter', 'llmagnet-llm-txt-generator')}
                  </th>
                  <th scope="col" className="py-1 pe-3 text-start font-medium">
                    {__('Type', 'llmagnet-llm-txt-generator')}
                  </th>
                  <th scope="col" className="py-1 text-start font-medium">
                    {__('Description', 'llmagnet-llm-txt-generator')}
                  </th>
                </tr>
              </thead>
              <tbody>
                {paramNames.map((name) => (
                  <tr key={name} className="border-t border-gray-100">
                    <td className="py-1.5 pe-3 align-top">
                      <code dir="ltr" className="font-medium text-gray-800">
                        {name}
                      </code>
                      {required.includes(name) && (
                        <span
                          className="ms-1 text-red-600"
                          title={__('Required', 'llmagnet-llm-txt-generator')}
                        >
                          *
                        </span>
                      )}
                    </td>
                    <td className="py-1.5 pe-3 align-top text-gray-600">
                      {params[name].type || '—'}
                    </td>
                    <td className="py-1.5 align-top text-gray-600">
                      {params[name].description || '—'}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      )}
    </li>
  );
}

function ScopeBadge({ write }: { write: boolean }) {
  return (
    <span
      className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${
        write ? 'bg-purple-100 text-purple-800' : 'bg-blue-100 text-blue-800'
      }`}
    >
      {write
        ? __('Write', 'llmagnet-llm-txt-generator')
        : __('Read', 'llmagnet-llm-txt-generator')}
    </span>
  );
}

function AnnotationBadge({
  children,
  tone = 'default',
}: {
  children: React.ReactNode;
  tone?: 'default' | 'warning' | 'info' | 'plan';
}) {
  const tones: Record<string, string> = {
    default: 'bg-gray-100 text-gray-600',
    warning: 'bg-red-100 text-red-700',
    info: 'bg-teal-50 text-teal-700',
    plan: 'bg-amber-100 text-amber-800',
  };
  return (
    <span
      className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${tones[tone]}`}
    >
      {children}
    </span>
  );
}