<script lang="ts">
  import Navbar from '$lib/components/Navbar.svelte';
  import Footer from '$lib/components/Footer.svelte';
  import ResourceCard from '$lib/components/ResourceCard.svelte';

  const tools = [
    {
      href: '/tools/privacy-scanner/',
      title: 'Privacy Scanner',
      description: 'Detect and redact personally identifiable information (PII) from text and files. Supports 30+ PII types including emails, SSN, API keys.',
      icon: '🔒',
      category: 'INTERACTIVE',
      status: 'live' as const
    },
    {
      href: '/tools/eda-gapminder/',
      title: 'EDA Gapminder',
      description: 'Explore global development data with interactive visualizations. GDP, life expectancy, and population trends from 1952-2007.',
      icon: '🌍',
      category: 'VISUALIZATION',
      status: 'live' as const
    },
    {
      href: '/tools/house-predictor/',
      title: 'House Price Predictor',
      description: 'Seattle/King County house price prediction with ML. Explore 21,613 houses on an interactive map and get instant price estimates.',
      icon: '🏠',
      category: 'VISUALIZATION',
      status: 'live' as const
    },
    {
      href: '/tools/flowchart/',
      title: 'Decision Flowchart',
      description: 'Interactive decision tree to help you select the appropriate statistical test based on your data type and research question.',
      icon: '🔀',
      category: 'FRAMEWORK',
      status: 'live' as const
    },
    {
      href: '#',
      title: 'Inference Estimator',
      description: 'Estimate inference costs and latency for LLM deployments across different providers and model sizes.',
      icon: '⚡',
      category: 'TOOL',
      status: 'coming-soon' as const
    },
    {
      href: '#',
      title: 'Cost Tracker',
      description: 'Track and compare API costs across OpenAI, Anthropic, and other LLM providers. Optimize your AI spending.',
      icon: '💰',
      category: 'TOOL',
      status: 'coming-soon' as const
    },
    {
      href: '#',
      title: 'Drift Monitor',
      description: 'Monitor model performance and detect data drift in production ML systems. Get alerts when models degrade.',
      icon: '📉',
      category: 'TOOL',
      status: 'coming-soon' as const
    }
  ];

  let searchQuery = $state('');
  let selectedCategory = $state('all');

  const categories = ['all', 'INTERACTIVE', 'VISUALIZATION', 'FRAMEWORK'];

  const filteredTools = $derived(
    tools.filter(tool => {
      const matchesSearch = tool.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                           tool.description.toLowerCase().includes(searchQuery.toLowerCase());
      const matchesCategory = selectedCategory === 'all' || tool.category === selectedCategory;
      return matchesSearch && matchesCategory;
    })
  );
</script>

<svelte:head>
  <title>Tools | Build with AI</title>
  <meta name="description" content="Interactive tools for data science, machine learning, and AI development." />
</svelte:head>

<div class="min-h-screen bg-gradient-to-b from-slate-50 to-white">
  <Navbar />

  <main class="pt-24 pb-16 px-6">
    <div class="max-w-6xl mx-auto">
      <!-- Header -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">Tools</h1>
        <p class="text-gray-600 max-w-2xl mx-auto">
          Interactive tools to help you with data science, machine learning, and AI development.
        </p>
      </div>

      <!-- Search & Filters -->
      <div class="flex flex-col sm:flex-row gap-4 mb-8">
        <div class="flex-1">
          <input
            type="text"
            placeholder="Search tools..."
            bind:value={searchQuery}
            class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all"
          />
        </div>
        <select
          bind:value={selectedCategory}
          class="px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white"
        >
          <option value="all">All Categories</option>
          {#each categories.filter(c => c !== 'all') as category}
            <option value={category}>{category}</option>
          {/each}
        </select>
      </div>

      <!-- Tools Grid -->
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        {#each filteredTools as tool}
          <ResourceCard {...tool} />
        {/each}
      </div>

      {#if filteredTools.length === 0}
        <div class="text-center py-12">
          <p class="text-gray-500">No tools found matching your criteria.</p>
        </div>
      {/if}
    </div>
  </main>

  <Footer />
</div>
