<script setup lang="ts">
const tools = [
  {
    name: 'activity',
    description: 'Real-time current activity and status of Arthur Danjou, including what he\'s currently working on.',
    inputs: []
  },
  {
    name: 'resume-link',
    description: 'Retrieves a direct download link to Arthur Danjou\'s professional resume in the specified language.',
    inputs: [{ name: 'lang', type: 'string', description: 'The language for the resume: \'en\' for English or \'fr\' for French' }]
  },
  {
    name: 'stats',
    description: 'Detailed coding statistics and analytics from WakaTime, including programming languages, time spent coding, and productivity metrics.',
    inputs: []
  },
  {
    name: 'status-page',
    description: 'Real-time status, uptime monitoring, and incident reports for Arthur Danjou\'s homelab infrastructure, powered by UptimeKuma.',
    inputs: []
  },
  {
    name: 'uses-by-category',
    description: 'Retrieves a filtered list of tools, software, and hardware used by Arthur Danjou based on a specific category.',
    inputs: [{ name: 'categoryName', type: 'string', description: 'The category to filter by: \'homelab\', \'ide\', \'hardware\', or \'software\'' }]
  },
  {
    name: 'weather',
    description: 'Get current weather for a city.',
    inputs: [{ name: 'city', type: 'string', description: 'City name' }]
  }
]

const prompts = [
  { name: 'activity', description: 'Retrieve Arthur Danjou\'s current real-time activity status' },
  { name: 'contact', description: 'Retrieve contact information and social media links' },
  { name: 'hobbies', description: 'Retrieve information about hobbies and interests' },
  { name: 'languages', description: 'Retrieve languages spoken with proficiency levels' },
  { name: 'profile', description: 'Retrieve comprehensive professional profile information' },
  { name: 'projects', description: 'Retrieve list of personal and professional projects' },
  { name: 'resume', description: 'Request and retrieve professional resume in specified language' },
  { name: 'skills', description: 'Retrieve comprehensive list of technical skills' },
  { name: 'stats', description: 'Retrieve detailed coding statistics from WakaTime' },
  { name: 'status-page', description: 'Retrieve real-time status page of homelab infrastructure' },
  { name: 'uses-by-category', description: 'Retrieve tools, software, and hardware by category' }
]

const resources = [
  { uri: 'resource://artmcp/profile', title: 'Professional Profile', description: 'Biography, location, availability, career goals' },
  { uri: 'resource://artmcp/contact', title: 'Contact Information', description: 'Email, LinkedIn, GitHub, social media links' },
  { uri: 'resource://artmcp/education', title: 'Education', description: 'Degrees, institutions, academic achievements' },
  { uri: 'resource://artmcp/experiences', title: 'Experiences', description: 'Professional work experiences and roles' },
  { uri: 'resource://artmcp/hobbies', title: 'Hobbies & Interests', description: 'Personal hobbies and passions' },
  { uri: 'resource://artmcp/languages', title: 'Spoken Languages', description: 'Languages with proficiency levels' },
  { uri: 'resource://artmcp/projects', title: 'Projects Portfolio', description: 'Technical projects and achievements' },
  { uri: 'resource://artmcp/skills', title: 'Skills', description: 'Technical skills and tools mastered' },
  { uri: 'resource://artmcp/uses', title: 'Tech Stack & Tools', description: 'Tools, software, and hardware used' }
]

const apiEndpoints = [
  { method: 'GET', path: '/api/profile', description: 'Profile information' },
  { method: 'GET', path: '/api/contact', description: 'Contact information' },
  { method: 'GET', path: '/api/skills', description: 'Technical skills' },
  { method: 'GET', path: '/api/experiences', description: 'Work experiences' },
  { method: 'GET', path: '/api/education', description: 'Education background' },
  { method: 'GET', path: '/api/projects', description: 'Projects portfolio' },
  { method: 'GET', path: '/api/languages', description: 'Spoken languages' },
  { method: 'GET', path: '/api/hobbies', description: 'Hobbies and interests' },
  { method: 'GET', path: '/api/uses', description: 'Tech stack and tools' },
  { method: 'GET', path: '/api/activity', description: 'Real-time activity' },
  { method: 'GET', path: '/api/wakatime', description: 'Coding statistics' },
  { method: 'GET', path: '/api/status-page', description: 'Status page' },
  { method: 'GET', path: '/api/resumes/{en|fr}', description: 'Download resume' }
]
</script>

<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <!-- Hero Header -->
    <div class="bg-linear-to-br from-primary to-primary-600 dark:from-primary-900 dark:to-primary-800">
      <UContainer class="py-16">
        <div class="text-center text-white">
          <UBadge
            color="neutral"
            variant="subtle"
            size="lg"
            class="mb-4"
          >
            Model Context Protocol
          </UBadge>
          <h1 class="text-4xl sm:text-5xl font-bold mb-4">
            ArtMCP Documentation
          </h1>
          <p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
            Complete documentation for ArtMCP - Arthur Danjou's Model Context Protocol Server
          </p>
          <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <UButton
              to="/"
              size="lg"
              color="neutral"
              variant="solid"
              icon="i-heroicons-arrow-left"
            >
              Back to Home
            </UButton>
            <UButton
              to="https://github.com/ArthurDanjou/artapi"
              target="_blank"
              size="lg"
              color="neutral"
              variant="outline"
              icon="i-simple-icons-github"
            >
              View on GitHub
            </UButton>
          </div>
        </div>
      </UContainer>
    </div>

    <!-- Main Content -->
    <UContainer class="py-12">
      <!-- Overview -->
      <UCard
        class="mb-8"
        :ui="{ body: 'p-8' }"
        variant="outline"
      >
        <h2 class="text-3xl font-bold mb-4">
          What is ArtMCP?
        </h2>
        <p class="text-lg text-gray-600 dark:text-gray-400 mb-4">
          ArtMCP provides AI assistants and applications with structured access to Arthur Danjou's professional information through the Model Context Protocol. This includes:
        </p>
        <div class="grid md:grid-cols-2 gap-4">
          <div class="flex items-start gap-3">
            <UIcon
              name="i-heroicons-check-circle"
              class="w-6 h-6 text-green-500 shrink-0 mt-0.5"
            />
            <div>
              <p class="font-medium">
                Comprehensive profile data and biography
              </p>
            </div>
          </div>
          <div class="flex items-start gap-3">
            <UIcon
              name="i-heroicons-check-circle"
              class="w-6 h-6 text-green-500 shrink-0 mt-0.5"
            />
            <div>
              <p class="font-medium">
                Work experiences and professional background
              </p>
            </div>
          </div>
          <div class="flex items-start gap-3">
            <UIcon
              name="i-heroicons-check-circle"
              class="w-6 h-6 text-green-500 shrink-0 mt-0.5"
            />
            <div>
              <p class="font-medium">
                Portfolio of projects and achievements
              </p>
            </div>
          </div>
          <div class="flex items-start gap-3">
            <UIcon
              name="i-heroicons-check-circle"
              class="w-6 h-6 text-green-500 shrink-0 mt-0.5"
            />
            <div>
              <p class="font-medium">
                Technical skills and expertise
              </p>
            </div>
          </div>
          <div class="flex items-start gap-3">
            <UIcon
              name="i-heroicons-check-circle"
              class="w-6 h-6 text-green-500 shrink-0 mt-0.5"
            />
            <div>
              <p class="font-medium">
                Education and academic background
              </p>
            </div>
          </div>
          <div class="flex items-start gap-3">
            <UIcon
              name="i-heroicons-check-circle"
              class="w-6 h-6 text-green-500 shrink-0 mt-0.5"
            />
            <div>
              <p class="font-medium">
                Real-time activity and coding statistics
              </p>
            </div>
          </div>
        </div>
      </UCard>

      <!-- Quick Start -->
      <UCard
        class="mb-8"
        :ui="{ body: 'p-8' }"
        variant="outline"
      >
        <h2 class="text-3xl font-bold mb-6">
          Quick Start
        </h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6">
          Get started with ArtMCP in seconds by installing it in your favorite AI assistant:
        </p>

        <div class="grid md:grid-cols-2 gap-6">
          <div>
            <h3 class="text-xl font-semibold mb-4">
              MCP Configuration
            </h3>
            <UCard variant="solid">
              <pre class="text-sm text-gray-100 overflow-x-auto">
<code>{
  "mcpServers": {
    "artmcp": {
      "url": "https://api.arthurdanjou.fr/mcp"
    }
  }
}</code>      
              </pre>
            </UCard>
          </div>

          <div>
            <h3 class="text-xl font-semibold mb-4">
              Direct Connection
            </h3>
            <UCard variant="solid">
              <pre class="text-sm text-gray-100 overflow-x-auto"><code>https://api.arthurdanjou.fr/mcp</code></pre>
            </UCard>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">
              Use this URL to connect your MCP client directly
            </p>
          </div>
        </div>
      </UCard>

      <!-- Tools Section -->
      <UCard
        class="mb-8"
        :ui="{ body: 'p-8' }"
        variant="outline"
      >
        <h2 class="text-3xl font-bold mb-4">
          Tools
        </h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6">
          Executable functions that AI assistants can call to perform actions or retrieve dynamic data.
        </p>

        <UAccordion
          :items="tools.map(tool => ({
            label: tool.name,
            icon: 'i-heroicons-wrench-screwdriver',
            defaultOpen: false,
            content: tool.description,
            slot: 'tool-' + tool.name
          }))"
        >
          <template
            v-for="tool in tools"
            :key="tool.name"
            #[`tool-${tool.name}`]
          >
            <div class="p-4">
              <p class="text-gray-700 dark:text-gray-300 mb-4">
                {{ tool.description }}
              </p>
              <div
                v-if="tool.inputs.length > 0"
                class="border-t border-gray-200 dark:border-gray-700 pt-4"
              >
                <h4 class="font-semibold mb-2">
                  Inputs:
                </h4>
                <ul class="space-y-2">
                  <li
                    v-for="input in tool.inputs"
                    :key="input.name"
                    class="flex gap-2"
                  >
                    <UBadge
                      color="primary"
                      variant="subtle"
                    >
                      {{ input.name }}
                    </UBadge>
                    <span class="text-sm text-gray-600 dark:text-gray-400">{{ input.description }}</span>
                  </li>
                </ul>
              </div>
            </div>
          </template>
        </UAccordion>
      </UCard>

      <!-- Prompts Section -->
      <UCard
        class="mb-8"
        :ui="{ body: 'p-8' }"
        variant="outline"
      >
        <h2 class="text-3xl font-bold mb-4">
          Prompts
        </h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6">
          Pre-configured conversation starters that guide AI assistants on how to query specific information.
        </p>

        <div class="grid md:grid-cols-2 gap-4">
          <UCard
            v-for="prompt in prompts"
            :key="prompt.name"
            :ui="{ body: 'p-4' }"
            variant="outline"
          >
            <div class="flex items-start gap-3">
              <UIcon
                name="i-heroicons-chat-bubble-left-right"
                class="w-5 h-5 text-primary shrink-0 mt-0.5"
              />
              <div>
                <h3 class="font-semibold mb-1">
                  {{ prompt.name }}
                </h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">
                  {{ prompt.description }}
                </p>
              </div>
            </div>
          </UCard>
        </div>
      </UCard>

      <!-- Resources Section -->
      <UCard
        class="mb-8"
        :ui="{ body: 'p-8' }"
        variant="outline"
      >
        <h2 class="text-3xl font-bold mb-4">
          Resources
        </h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6">
          Static or semi-static data endpoints that provide structured information.
        </p>

        <div class="space-y-3">
          <UCard
            v-for="resource in resources"
            :key="resource.uri"
            :ui="{ body: 'p-4' }"
            variant="outline"
          >
            <div class="flex flex-col gap-2">
              <div class="flex items-center gap-2">
                <UIcon
                  name="i-heroicons-document-text"
                  class="w-5 h-5 text-primary"
                />
                <h3 class="font-semibold">
                  {{ resource.title }}
                </h3>
              </div>
              <code class="text-xs text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
                {{ resource.uri }}
              </code>
              <p class="text-sm text-gray-600 dark:text-gray-400">
                {{ resource.description }}
              </p>
            </div>
          </UCard>
        </div>
      </UCard>

      <!-- API Endpoints Section -->
      <UCard :ui="{ body: 'p-8'}">
        <h2 class="text-3xl font-bold mb-4">
          REST API Endpoints
        </h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6">
          All resources are also available as REST API endpoints for direct HTTP access.
        </p>

        <div class="space-y-2">
          <div
            v-for="endpoint in apiEndpoints"
            :key="endpoint.path"
            class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
          >
            <UBadge
              color="success"
              variant="subtle"
              class="font-mono text-xs"
            >
              {{ endpoint.method }}
            </UBadge>
            <code class="text-sm font-mono text-gray-900 dark:text-gray-100 flex-1">{{ endpoint.path }}</code>
            <span class="text-sm text-gray-600 dark:text-gray-400">{{ endpoint.description }}</span>
          </div>
        </div>
      </UCard>
    </UContainer>
  </div>
</template>
