// Name: Random Choices Showcase
// Description: Demonstrates all possible choice options and configurations in Script Kit
// Author: johnlindquist

import "@johnlindquist/kit"

// Generate random data for demonstrations
const generateRandomChoices = (count = 10) => {
  const adjectives = ['Amazing', 'Brilliant', 'Creative', 'Dynamic', 'Elegant', 'Fantastic', 'Gorgeous', 'Incredible', 'Magnificent', 'Outstanding']
  const nouns = ['Script', 'Widget', 'Tool', 'App', 'Feature', 'Component', 'Module', 'Function', 'Service', 'Platform']
  const colors = ['red', 'blue', 'green', 'purple', 'orange', 'pink', 'yellow', 'cyan', 'magenta', 'lime']
  
  return Array.from({ length: count }, (_, i) => ({
    name: `${adjectives[i % adjectives.length]} ${nouns[i % nouns.length]} ${i + 1}`,
    value: `choice-${i + 1}`,
    description: `This is a detailed description for choice ${i + 1} with lots of helpful information`,
    tag: colors[i % colors.length],
    shortcut: i < 5 ? `cmd+${i + 1}` : undefined,
    icon: i % 3 === 0 ? '🎯' : i % 3 === 1 ? '⭐' : '🚀',
    preview: () => `<div class="p-4 bg-gradient-to-r from-${colors[i % colors.length]}-400 to-${colors[(i + 1) % colors.length]}-600 text-white rounded-lg">
      <h2 class="text-2xl font-bold mb-2">${adjectives[i % adjectives.length]} ${nouns[i % nouns.length]}</h2>
      <p>Preview content for choice ${i + 1}</p>
      <div class="mt-4">
        <span class="bg-white bg-opacity-20 px-2 py-1 rounded text-sm">Tag: ${colors[i % colors.length]}</span>
      </div>
    </div>`,
    group: i < 3 ? 'Featured' : i < 6 ? 'Popular' : i < 8 ? 'Recent' : 'Others'
  }))
}

// Demo 1: Basic choices with all properties
await div(md(`# Choice Showcase Demo

## Demo 1: Rich Choices with All Properties
Each choice has name, description, icon, tag, shortcut, preview, and group.`))

const basicChoice = await arg({
  placeholder: "Select from rich choices with all properties",
  hint: "Notice the icons, descriptions, shortcuts, and preview panel",
  enter: "Select Choice"
}, generateRandomChoices(12))

await div(md(`You selected: **${basicChoice}**`))

// Demo 2: Grouped choices
await div(md(`## Demo 2: Grouped Choices
Choices automatically organized by their 'group' property.`))

const groupedChoice = await arg("Select from grouped choices", generateRandomChoices(15))

// Demo 3: Choices with custom HTML rendering
await div(md(`## Demo 3: Custom HTML Rendering
Each choice can have custom HTML for rich visual presentation.`))

const htmlChoices = Array.from({ length: 8 }, (_, i) => ({
  name: `Custom Card ${i + 1}`,
  value: `card-${i + 1}`,
  html: `
    <div class="flex items-center p-3 border-l-4 border-${['blue', 'green', 'purple', 'red', 'yellow', 'pink', 'indigo', 'gray'][i]}-500 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700">
      <div class="text-3xl mr-4">${['🎨', '🔧', '📊', '🎯', '⚡', '🌟', '🔥', '💎'][i]}</div>
      <div>
        <div class="font-semibold text-lg">Custom Card ${i + 1}</div>
        <div class="text-sm text-gray-600 dark:text-gray-400">Rich HTML rendering with gradients and icons</div>
        <div class="flex mt-2 space-x-2">
          <span class="px-2 py-1 text-xs bg-${['blue', 'green', 'purple', 'red', 'yellow', 'pink', 'indigo', 'gray'][i]}-100 text-${['blue', 'green', 'purple', 'red', 'yellow', 'pink', 'indigo', 'gray'][i]}-800 rounded">Tag ${i + 1}</span>
        </div>
      </div>
    </div>
  `
}))

const htmlChoice = await arg("Select from custom HTML choices", htmlChoices)

// Demo 4: Dynamic choices based on input
await div(md(`## Demo 4: Dynamic Choices
Choices that change based on what you type.`))

const dynamicChoice = await arg("Type to filter and generate choices", (input) => {
  if (!input) return [{ name: "Start typing to see dynamic choices...", info: true }]
  
  const words = input.toLowerCase().split(' ')
  return words.map((word, i) => ({
    name: `Dynamic: ${word.charAt(0).toUpperCase() + word.slice(1)}`,
    value: word,
    description: `Generated from your input: "${word}"`,
    icon: ['🔍', '✨', '🎪', '🎭', '🎨'][i % 5],
    preview: () => `
      <div class="p-6 bg-gradient-to-br from-purple-500 to-pink-500 text-white rounded-xl">
        <h3 class="text-2xl font-bold mb-4">Dynamic Choice: ${word}</h3>
        <p class="mb-4">This choice was generated from your input in real-time!</p>
        <div class="bg-white bg-opacity-20 p-3 rounded">
          <strong>Input:</strong> "${input}"<br>
          <strong>Word:</strong> "${word}"<br>
          <strong>Position:</strong> ${i + 1}
        </div>
      </div>
    `
  }))
})

// Demo 5: Choices with actions and shortcuts
await div(md(`## Demo 5: Choices with Actions
Press cmd+k to see available actions, or use the shortcuts shown.`))

const actionChoices = Array.from({ length: 6 }, (_, i) => ({
  name: `Action Item ${i + 1}`,
  value: `action-${i + 1}`,
  description: `Item with custom actions and shortcuts`,
  icon: ['⚡', '🔥', '💫', '🌟', '✨', '🎯'][i],
  shortcut: `cmd+${i + 1}`,
  actions: [
    {
      name: `Edit Item ${i + 1}`,
      shortcut: `cmd+e`,
      onAction: () => {
        toast(`Editing item ${i + 1}!`)
      }
    },
    {
      name: `Delete Item ${i + 1}`,
      shortcut: `cmd+d`,
      onAction: () => {
        toast(`Deleting item ${i + 1}!`)
      }
    }
  ]
}))

const actionChoice = await arg({
  placeholder: "Select item (cmd+k for actions)",
  shortcuts: [
    {
      name: "Show Info",
      key: "cmd+i",
      onPress: () => {
        toast("This demo shows choices with custom actions!")
      },
      bar: "right"
    }
  ]
}, actionChoices, [
  {
    name: "Bulk Edit All",
    shortcut: "cmd+shift+e",
    onAction: () => {
      toast("Bulk editing all items!")
    }
  },
  {
    name: "Export Selection",
    shortcut: "cmd+shift+x",
    onAction: () => {
      toast("Exporting selection!")
    }
  }
])

// Demo 6: Grid layout choices
await div(md(`## Demo 6: Grid Layout
Same choices displayed in a grid format for visual selection.`))

const gridChoices = Array.from({ length: 12 }, (_, i) => ({
  name: `Grid ${i + 1}`,
  value: `grid-${i + 1}`,
  html: `
    <div class="flex flex-col items-center p-4 bg-gradient-to-b from-blue-400 to-purple-600 text-white rounded-lg shadow-lg transform transition-transform hover:scale-105">
      <div class="text-4xl mb-2">${['🎯', '⭐', '🚀', '💎', '🔥', '⚡', '🌟', '💫', '✨', '🎨', '🎪', '🎭'][i]}</div>
      <div class="font-bold text-center">Grid ${i + 1}</div>
      <div class="text-xs text-center opacity-80 mt-1">Click to select</div>
    </div>
  `
}))

const gridChoice = await grid({
  placeholder: "Select from grid layout",
  columns: 4,
  enter: "Select Grid Item"
}, gridChoices)

// Demo 7: Multi-select
await div(md(`## Demo 7: Multi-Select
Select multiple items at once.`))

const multiChoices = Array.from({ length: 8 }, (_, i) => ({
  name: `Multi Option ${i + 1}`,
  value: `multi-${i + 1}`,
  description: `Selectable option ${i + 1} for multi-select demo`,
  icon: ['☑️', '✅', '🔲', '📋', '📝', '📊', '📈', '📉'][i]
}))

const multiSelection = await select("Select multiple options (use space to toggle)", multiChoices)

await div(md(`## Results Summary

**Basic Choice:** ${basicChoice}
**Grouped Choice:** ${groupedChoice}  
**HTML Choice:** ${htmlChoice}
**Dynamic Choice:** ${dynamicChoice}
**Action Choice:** ${actionChoice}
**Grid Choice:** ${gridChoice}
**Multi-Selection:** ${Array.isArray(multiSelection) ? multiSelection.join(', ') : multiSelection}

### Choice Features Demonstrated:
- ✅ Rich descriptions and icons
- ✅ Custom HTML rendering  
- ✅ Grouping and organization
- ✅ Dynamic generation based on input
- ✅ Custom actions and shortcuts
- ✅ Grid layout presentation
- ✅ Multi-select capabilities
- ✅ Preview panels
- ✅ Tags and metadata
- ✅ Keyboard shortcuts
- ✅ Custom styling and gradients

This showcase demonstrates the full power and flexibility of Script Kit's choice system!`))