import { useStore } from '@nanostores/react'
import { useState } from 'react'
import { $apiKeys, createAPIKey, $deleteAPIKey, $creating } from '../stores/apiKeys'
import { $webhooks, createWebhook, updateWebhook, $deleteWebhook, testWebhook, fetchWebhookDeliveries } from '../stores/webhooks'
import { $billing } from '../stores/billing'
import { addToast } from '../stores/app'
import { EmptyState, APIPageSkeleton, PageHeader } from '../components/shared'
import { Icons } from '../components/shared/Icons'
import { Button, Input, Modal, UsageIndicator } from '../components/ui'
import type { Webhook, WebhookDelivery, WebhookEvent } from '../types'

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE'

interface QueryParam {
  name: string
  description: string
  default?: string
  options?: string[]  // For select dropdowns
}

interface Endpoint {
  method: HttpMethod
  path: string
  description: string
  queryParams?: QueryParam[]
  requestBody?: string
  responseExample: string
}

const endpoints: Endpoint[] = [
  {
    method: 'GET',
    path: '/api/v1/posts',
    description: 'List published posts with pagination',
    queryParams: [
      { name: 'limit', description: 'Results per page (max 100)', default: '20' },
      { name: 'offset', description: 'Skip N results', default: '0' },
      { name: 'tag', description: 'Filter by tag' },
      { name: 'include', description: 'Include extra fields', options: ['', 'content'] },
    ],
    responseExample: `{
  "posts": [
    {
      "id": "uuid",
      "slug": "hello-world",
      "title": "Hello World",
      "description": "My first post",
      "tags": ["intro"],
      "date": "2024-01-15",
      "draft": false
    }
  ],
  "total": 42,
  "limit": 20,
  "offset": 0
}`,
  },
  {
    method: 'POST',
    path: '/api/v1/posts',
    description: 'Create a new post',
    requestBody: `{
  "title": "My New Post",
  "slug": "my-new-post",
  "content": "# Markdown content",
  "description": "Optional description",
  "tags": ["tutorial"],
  "draft": false
}`,
    responseExample: `{
  "id": "uuid",
  "slug": "my-new-post",
  "title": "My New Post",
  ...
}`,
  },
  {
    method: 'GET',
    path: '/api/v1/posts/{slug}',
    description: 'Get a single post by slug (includes content)',
    responseExample: `{
  "id": "uuid",
  "slug": "hello-world",
  "title": "Hello World",
  "description": "My first post",
  "content": {
    "markdown": "# Full markdown...",
    "html": "<h1>Full markdown...</h1>"
  },
  "tags": ["intro"],
  "date": "2024-01-15"
}`,
  },
  {
    method: 'PUT',
    path: '/api/v1/posts/{slug}',
    description: 'Update an existing post',
    requestBody: `{
  "title": "Updated Title",
  "content": "# Updated content"
}`,
    responseExample: `{
  "id": "uuid",
  "slug": "hello-world",
  "title": "Updated Title",
  ...
}`,
  },
  {
    method: 'DELETE',
    path: '/api/v1/posts/{slug}',
    description: 'Delete a post permanently',
    responseExample: `204 No Content`,
  },
  {
    method: 'GET',
    path: '/api/v1/settings',
    description: 'Get public site configuration',
    responseExample: `{
  "site_name": "My Blog",
  "site_description": "A developer blog",
  "author_name": "Jane Doe",
  "author_bio": "Software engineer",
  "twitter_handle": "janedoe",
  "accent_color": "#10b981"
}`,
  },
]

const methodColors: Record<HttpMethod, string> = {
  GET: 'bg-success/15 text-success',
  POST: 'bg-blue-500/15 text-blue-500',
  PUT: 'bg-warning/15 text-warning',
  DELETE: 'bg-danger/15 text-danger',
}

const webhookEvents: { value: WebhookEvent; label: string }[] = [
  { value: 'post.published', label: 'Post Published' },
  { value: 'post.updated', label: 'Post Updated' },
  { value: 'post.deleted', label: 'Post Deleted' },
]

function EndpointCard({ endpoint, baseUrl, apiKey }: { endpoint: Endpoint; baseUrl: string; apiKey?: string }) {
  const [expanded, setExpanded] = useState(false)
  const [slugInput, setSlugInput] = useState('hello-world')
  const [requestBody, setRequestBody] = useState(endpoint.requestBody || '')
  const [queryParams, setQueryParams] = useState<Record<string, string>>(() => {
    const initial: Record<string, string> = {}
    endpoint.queryParams?.forEach(p => {
      initial[p.name] = p.default || ''
    })
    return initial
  })
  const [response, setResponse] = useState<{ status: number; body: string; time: number } | null>(null)
  const [loading, setLoading] = useState(false)

  const basePath = endpoint.path.replace('{slug}', slugInput)
  const queryString = Object.entries(queryParams)
    .filter(([_, v]) => v !== '')
    .map(([k, v]) => `${k}=${encodeURIComponent(v)}`)
    .join('&')
  const actualPath = queryString ? `${basePath}?${queryString}` : basePath
  const fullUrl = `${baseUrl}${actualPath}`

  const curlExample = endpoint.requestBody
    ? `curl -X ${endpoint.method} "${fullUrl}" \\
  -H "Authorization: Bearer ${apiKey || 'YOUR_API_KEY'}" \\
  -H "Content-Type: application/json" \\
  -d '${endpoint.requestBody.replace(/\n\s*/g, ' ')}'`
    : `curl -X ${endpoint.method} "${fullUrl}" \\
  -H "Authorization: Bearer ${apiKey || 'YOUR_API_KEY'}"`

  const copyCode = (code: string) => {
    navigator.clipboard.writeText(code)
    addToast('Copied to clipboard', 'success')
  }

  const updateQueryParam = (name: string, value: string) => {
    setQueryParams(prev => ({ ...prev, [name]: value }))
  }

  const sendRequest = async () => {
    setLoading(true)
    setResponse(null)
    const start = Date.now()
    try {
      const headers: Record<string, string> = {
        'Content-Type': 'application/json',
      }
      if (apiKey) {
        headers['Authorization'] = `Bearer ${apiKey}`
      }
      const res = await fetch(actualPath, {
        method: endpoint.method,
        headers,
        body: endpoint.requestBody ? requestBody : undefined,
      })
      const time = Date.now() - start
      let body: string
      try {
        const json = await res.json()
        body = JSON.stringify(json, null, 2)
      } catch {
        body = res.status === 204 ? '(No Content)' : await res.text()
      }
      setResponse({ status: res.status, body, time })
    } catch (err) {
      setResponse({ status: 0, body: `Error: ${err instanceof Error ? err.message : 'Request failed'}`, time: Date.now() - start })
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="border border-border hover:border-muted transition-colors">
      <button
        onClick={() => setExpanded(!expanded)}
        className="group w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-muted/5 transition-colors cursor-pointer"
      >
        <span className={`px-2 py-0.5 text-xs font-mono font-medium ${methodColors[endpoint.method]}`}>
          {endpoint.method}
        </span>
        <code className="text-sm font-mono flex-1 group-hover:text-accent transition-colors">{endpoint.path}</code>
        <span className="text-xs text-muted hidden sm:block">{endpoint.description}</span>
        <Icons.ChevronRight className={`text-muted transition-transform group-hover:text-text ${expanded ? 'rotate-90' : ''}`} />
      </button>

      {expanded && (
        <div className="border-t border-border bg-muted/5 p-4 space-y-4">
          <p className="text-sm text-muted">{endpoint.description}</p>

          {endpoint.path.includes('{slug}') && (
            <div className="flex items-center gap-2">
              <label className="text-xs text-muted w-16">slug:</label>
              <Input
                value={slugInput}
                onChange={setSlugInput}
                className="max-w-48 text-sm"
                placeholder="post-slug"
              />
            </div>
          )}

          {endpoint.queryParams && endpoint.queryParams.length > 0 && (
            <div className="space-y-2">
              <div className="text-xs text-muted">Query Parameters</div>
              {endpoint.queryParams.map(param => (
                <div key={param.name} className="flex items-center gap-2">
                  <label className="text-xs text-muted w-16 shrink-0">{param.name}:</label>
                  {param.options ? (
                    <select
                      value={queryParams[param.name] || ''}
                      onChange={e => updateQueryParam(param.name, e.target.value)}
                      className="px-2 py-1.5 text-sm bg-surface border border-border focus:border-accent focus:outline-none"
                    >
                      {param.options.map(opt => (
                        <option key={opt} value={opt}>{opt || '(none)'}</option>
                      ))}
                    </select>
                  ) : (
                    <Input
                      value={queryParams[param.name] || ''}
                      onChange={v => updateQueryParam(param.name, v)}
                      className="max-w-32 text-sm"
                      placeholder={param.default || ''}
                    />
                  )}
                  <span className="text-xs text-muted">{param.description}</span>
                </div>
              ))}
            </div>
          )}

          {endpoint.requestBody && (
            <div>
              <div className="text-xs text-muted mb-2">Request Body</div>
              <textarea
                value={requestBody}
                onChange={e => setRequestBody(e.target.value)}
                className="w-full p-3 bg-surface border border-border text-xs font-mono resize-y min-h-32"
                spellCheck={false}
              />
            </div>
          )}

          <Button
            variant="primary"
            Icon={loading ? undefined : Icons.Play}
            onClick={sendRequest}
            loading={loading}
          >
            {loading ? 'Sending...' : 'Try it'}
          </Button>

          {response && (
            <div>
              <div className="flex items-center gap-3 mb-2">
                <span className="text-xs text-muted">Response</span>
                <span className={`px-2 py-0.5 text-xs font-mono ${response.status >= 200 && response.status < 300 ? 'bg-success/15 text-success' : response.status >= 400 ? 'bg-danger/15 text-danger' : 'bg-warning/15 text-warning'}`}>
                  {response.status || 'Error'}
                </span>
                <span className="text-xs text-muted">{response.time}ms</span>
              </div>
              <pre className="p-3 bg-surface border border-border text-xs font-mono max-h-64 overflow-y-auto whitespace-pre-wrap break-words">
                {response.body}
              </pre>
            </div>
          )}

          <div>
            <div className="text-xs text-muted mb-2">Example Response</div>
            <pre className="p-3 bg-surface border border-border text-xs font-mono overflow-x-auto">
              {endpoint.responseExample}
            </pre>
          </div>

          <div>
            <div className="flex items-center justify-between mb-2">
              <span className="text-xs text-muted">cURL</span>
              <button onClick={() => copyCode(curlExample)} className="text-xs text-muted hover:text-text">
                <Icons.Copy className="inline mr-1" />Copy
              </button>
            </div>
            <pre className="p-3 bg-surface border border-border text-xs font-mono overflow-x-auto whitespace-pre-wrap">
              {curlExample}
            </pre>
          </div>
        </div>
      )}
    </div>
  )
}

function WebhookCard({ webhook, onEdit, onDelete, onTest }: {
  webhook: Webhook
  onEdit: () => void
  onDelete: () => void
  onTest: () => void
}) {
  const [showLogs, setShowLogs] = useState(false)
  const [deliveries, setDeliveries] = useState<WebhookDelivery[]>([])
  const [loadingLogs, setLoadingLogs] = useState(false)

  const loadDeliveries = async () => {
    setLoadingLogs(true)
    try {
      const data = await fetchWebhookDeliveries(webhook.id)
      setDeliveries(data)
      setShowLogs(true)
    } catch {
      addToast('Failed to load delivery logs', 'error')
    } finally {
      setLoadingLogs(false)
    }
  }

  return (
    <div className="border border-border p-4">
      <div className="flex items-start justify-between gap-4">
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2 mb-1">
            <span className={`w-2 h-2 rounded-full ${webhook.enabled ? (webhook.last_status === 'success' ? 'bg-success' : webhook.last_status === 'failed' ? 'bg-danger' : 'bg-muted') : 'bg-muted'}`} />
            <span className="font-medium text-sm">{webhook.name}</span>
            {!webhook.enabled && <span className="text-xs text-muted">(disabled)</span>}
          </div>
          <code className="text-xs text-muted break-all">{webhook.url}</code>
          <div className="flex flex-wrap gap-1 mt-2">
            {webhook.events.map(event => (
              <span key={event} className="px-1.5 py-0.5 text-xs bg-muted/20 text-muted">
                {event}
              </span>
            ))}
          </div>
        </div>
        <div className="flex items-center gap-1">
          <button onClick={loadDeliveries} className="p-1.5 text-muted hover:text-text" title="View logs">
            <Icons.List className="w-4 h-4" />
          </button>
          <button onClick={onTest} className="p-1.5 text-muted hover:text-text" title="Test">
            <Icons.Play className="w-4 h-4" />
          </button>
          <button onClick={onEdit} className="p-1.5 text-muted hover:text-text" title="Edit">
            <Icons.Edit className="w-4 h-4" />
          </button>
          <button onClick={onDelete} className="p-1.5 text-danger hover:text-danger/80" title="Delete">
            <Icons.Trash className="w-4 h-4" />
          </button>
        </div>
      </div>

      {showLogs && (
        <div className="mt-4 pt-4 border-t border-border">
          <div className="flex items-center justify-between mb-2">
            <span className="text-xs font-medium text-muted">Recent Deliveries</span>
            <button onClick={() => setShowLogs(false)} className="text-xs text-muted hover:text-text">Close</button>
          </div>
          {loadingLogs ? (
            <div className="text-xs text-muted">Loading...</div>
          ) : deliveries.length === 0 ? (
            <div className="text-xs text-muted">No deliveries yet</div>
          ) : (
            <div className="space-y-2 max-h-48 overflow-y-auto">
              {deliveries.slice(0, 10).map(d => (
                <div key={d.id} className="flex items-center gap-2 text-xs">
                  <span className={`w-2 h-2 rounded-full ${d.status === 'success' ? 'bg-success' : 'bg-danger'}`} />
                  <span className="text-muted">{d.event}</span>
                  <span className="text-muted">•</span>
                  <span className={d.status === 'success' ? 'text-success' : 'text-danger'}>
                    {d.response_code || d.status}
                  </span>
                  <span className="text-muted ml-auto">
                    {new Date(d.created_at).toLocaleString()}
                  </span>
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  )
}

export default function APIPage() {
  const { data: keys } = useStore($apiKeys)
  const { data: webhooks } = useStore($webhooks)
  const { data: billing } = useStore($billing)
  const creating = useStore($creating)
  const deleteKey = useStore($deleteAPIKey)
  const deleteWebhookMutation = useStore($deleteWebhook)

  const [showCreateKey, setShowCreateKey] = useState(false)
  const [newKeyName, setNewKeyName] = useState('')
  const [createdKey, setCreatedKey] = useState<string | null>(null)
  const [deleteKeyModal, setDeleteKeyModal] = useState<string | null>(null)

  const [showWebhookModal, setShowWebhookModal] = useState(false)
  const [editingWebhook, setEditingWebhook] = useState<Webhook | null>(null)
  const [webhookForm, setWebhookForm] = useState({ name: '', url: '', events: [] as WebhookEvent[], secret: '', enabled: true })
  const [deleteWebhookModal, setDeleteWebhookModal] = useState<string | null>(null)
  const [savingWebhook, setSavingWebhook] = useState(false)

  const handleCreateKey = async () => {
    if (!newKeyName.trim()) return
    try {
      const result = await createAPIKey(newKeyName)
      setCreatedKey(result.key)
      setNewKeyName('')
      setShowCreateKey(false)
      addToast('API key created', 'success')
    } catch {
      addToast('Failed to create API key', 'error')
    }
  }

  const handleDeleteKey = async () => {
    if (!deleteKeyModal) return
    try {
      await deleteKey.mutate(deleteKeyModal)
      addToast('API key deleted', 'success')
      setDeleteKeyModal(null)
    } catch {
      addToast('Failed to delete API key', 'error')
    }
  }

  const copyKey = (key: string) => {
    navigator.clipboard.writeText(key)
    addToast('Copied to clipboard', 'success')
  }

  const formatDate = (dateStr: string | null) => {
    if (!dateStr) return 'Never'
    return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
  }

  const openWebhookModal = (webhook?: Webhook) => {
    if (webhook) {
      setEditingWebhook(webhook)
      setWebhookForm({ name: webhook.name, url: webhook.url, events: webhook.events, secret: webhook.secret || '', enabled: webhook.enabled })
    } else {
      setEditingWebhook(null)
      setWebhookForm({ name: '', url: '', events: [], secret: '', enabled: true })
    }
    setShowWebhookModal(true)
  }

  const handleSaveWebhook = async () => {
    if (!webhookForm.name || !webhookForm.url || webhookForm.events.length === 0) {
      addToast('Name, URL, and at least one event are required', 'error')
      return
    }
    setSavingWebhook(true)
    try {
      if (editingWebhook) {
        await updateWebhook(editingWebhook.id, webhookForm)
        addToast('Webhook updated', 'success')
      } else {
        await createWebhook(webhookForm)
        addToast('Webhook created', 'success')
      }
      setShowWebhookModal(false)
    } catch {
      addToast('Failed to save webhook', 'error')
    } finally {
      setSavingWebhook(false)
    }
  }

  const handleDeleteWebhook = async () => {
    if (!deleteWebhookModal) return
    try {
      await deleteWebhookMutation.mutate(deleteWebhookModal)
      addToast('Webhook deleted', 'success')
      setDeleteWebhookModal(null)
    } catch {
      addToast('Failed to delete webhook', 'error')
    }
  }

  const handleTestWebhook = async (id: string) => {
    try {
      await testWebhook(id)
      addToast('Test webhook sent', 'success')
    } catch {
      addToast('Failed to send test webhook', 'error')
    }
  }

  const toggleEvent = (event: WebhookEvent) => {
    setWebhookForm(f => ({
      ...f,
      events: f.events.includes(event) ? f.events.filter(e => e !== event) : [...f.events, event]
    }))
  }

  if (!keys) return <APIPageSkeleton />

  const baseUrl = window.location.origin
  const firstKey = keys.length > 0 ? keys[0].key : undefined

  return (
    <div>
      <PageHeader>
        <Button variant="primary" Icon={Icons.Plus} onClick={() => setShowCreateKey(true)}>
          Create Key
        </Button>
      </PageHeader>

      <div className="-mx-6 lg:-mx-10 mt-6">
        {createdKey && (
          <div className="px-6 lg:px-10 py-4 bg-success/10 border-b border-success">
            <div className="flex items-center gap-2 mb-2">
              <Icons.CheckCircle className="text-success" />
              <span className="text-sm font-medium">API Key Created</span>
            </div>
            <p className="text-xs text-muted mb-3">Copy this key now. You won't be able to see it again.</p>
            <div className="flex items-center gap-2">
              <code className="flex-1 p-2 bg-surface border border-border text-xs font-mono truncate">{createdKey}</code>
              <Button variant="secondary" Icon={Icons.Copy} onClick={() => copyKey(createdKey)}>Copy</Button>
            </div>
            <button onClick={() => setCreatedKey(null)} className="mt-2 text-xs text-muted hover:text-text">Dismiss</button>
          </div>
        )}

        {/* API Keys */}
        <div className="px-6 lg:px-10 py-5">
          <div className="text-xs font-medium text-muted uppercase tracking-wide">Your API Keys</div>
          <div className="text-xs text-muted mt-0.5">Use these keys to authenticate API requests</div>
        </div>
        <div className="border-t border-border">
          {keys.length === 0 ? (
            <div className="px-6 lg:px-10 py-12">
              <EmptyState
                Icon={Icons.ApiKeys}
                title="No API keys"
                description="Create an API key to access the API"
                action={<Button variant="primary" Icon={Icons.Plus} onClick={() => setShowCreateKey(true)}>Create Key</Button>}
              />
            </div>
          ) : (
            keys.map((key, i) => (
              <div key={key.key} className={`flex flex-col sm:flex-row sm:items-center gap-4 px-6 lg:px-10 py-4 ${i > 0 ? 'border-t border-border' : ''}`}>
                <div className="flex-1 min-w-0">
                  <div className="text-sm font-medium">{key.name}</div>
                  <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted mt-1">
                    <code className="font-mono">{key.key.slice(0, 8)}...{key.key.slice(-4)}</code>
                    <span className="hidden sm:inline">•</span>
                    <span>Created {formatDate(key.created_at)}</span>
                    <span className="hidden sm:inline">•</span>
                    <span>Last used {formatDate(key.last_used_at)}</span>
                  </div>
                </div>
                <Button variant="ghost" Icon={Icons.Trash} className="text-danger hover:text-danger self-start sm:self-center" onClick={() => setDeleteKeyModal(key.key)}>Delete</Button>
              </div>
            ))
          )}
        </div>

        <div className="border-t border-border" />

        {/* Webhooks */}
        <div className="px-6 lg:px-10 py-5">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-xs font-medium text-muted uppercase tracking-wide">Webhooks</div>
              <div className="text-xs text-muted mt-0.5">Get notified when posts are published, updated, or deleted</div>
            </div>
            {billing && (
              <UsageIndicator
                used={billing.usage.webhooks}
                max={billing.tiers[billing.current_tier].max_webhooks}
                label="used"
              />
            )}
          </div>
        </div>
        <div className="px-6 lg:px-10 py-6 space-y-3">
          {webhooks && webhooks.length > 0 ? (
            webhooks.map(webhook => (
              <WebhookCard
                key={webhook.id}
                webhook={webhook}
                onEdit={() => openWebhookModal(webhook)}
                onDelete={() => setDeleteWebhookModal(webhook.id)}
                onTest={() => handleTestWebhook(webhook.id)}
              />
            ))
          ) : (
            <div className="text-sm text-muted">No webhooks configured</div>
          )}
          {billing && billing.usage.webhooks >= billing.tiers[billing.current_tier].max_webhooks ? (
            <div className="flex items-center gap-3 p-3 border border-warning/30 bg-warning/5">
              <Icons.AlertCircle className="text-warning flex-shrink-0" />
              <span className="text-sm text-muted">Webhook limit reached.</span>
              <Button variant="primary" href="/studio/billing">Upgrade</Button>
            </div>
          ) : (
            <Button variant="secondary" Icon={Icons.Plus} onClick={() => openWebhookModal()}>Add Webhook</Button>
          )}
        </div>

        <div className="border-t border-border" />

        {/* API Reference */}
        <div className="px-6 lg:px-10 py-5">
          <div className="text-xs font-medium text-muted uppercase tracking-wide">API Reference</div>
          <div className="text-xs text-muted mt-0.5">Base URL: <code className="text-text">{baseUrl}</code></div>
        </div>
        <div className="px-6 lg:px-10 py-6 space-y-2">
          {endpoints.map((endpoint) => (
            <EndpointCard key={`${endpoint.method}-${endpoint.path}`} endpoint={endpoint} baseUrl={baseUrl} apiKey={firstKey} />
          ))}
        </div>

        <div className="border-t border-border" />

        {/* Authentication */}
        <div className="px-6 lg:px-10 py-5">
          <div className="text-xs font-medium text-muted uppercase tracking-wide">Authentication</div>
          <div className="text-xs text-muted mt-0.5">How to authenticate your requests</div>
        </div>
        <div className="px-6 lg:px-10 py-6">
          <p className="text-sm text-muted mb-3">All API requests require a Bearer token in the Authorization header:</p>
          <pre className="p-3 bg-surface border border-border text-xs font-mono overflow-x-auto">
            Authorization: Bearer {firstKey ? `${firstKey.slice(0, 8)}...` : 'YOUR_API_KEY'}
          </pre>
          <p className="text-xs text-muted mt-3">Keep API keys secure and never expose them in client-side code.</p>
        </div>
      </div>

      {/* Create Key Modal */}
      <Modal open={showCreateKey} onClose={() => setShowCreateKey(false)} title="Create API Key">
        <div className="space-y-4">
          <div className="space-y-1">
            <label className="label">Key Name</label>
            <Input value={newKeyName} onChange={setNewKeyName} placeholder="My API Key" />
            <p className="text-xs text-muted">A name to identify this key</p>
          </div>
          <div className="flex justify-end gap-2">
            <Button variant="secondary" onClick={() => setShowCreateKey(false)}>Cancel</Button>
            <Button variant="primary" onClick={handleCreateKey} loading={creating} disabled={!newKeyName.trim()}>Create</Button>
          </div>
        </div>
      </Modal>

      {/* Delete Key Modal */}
      <Modal open={!!deleteKeyModal} onClose={() => setDeleteKeyModal(null)} title="Delete API Key">
        <p className="text-sm text-muted mb-4">Are you sure? Applications using this key will stop working.</p>
        <div className="flex justify-end gap-2">
          <Button variant="secondary" onClick={() => setDeleteKeyModal(null)}>Cancel</Button>
          <Button variant="danger" onClick={handleDeleteKey} loading={deleteKey.loading}>Delete</Button>
        </div>
      </Modal>

      {/* Webhook Modal */}
      <Modal open={showWebhookModal} onClose={() => setShowWebhookModal(false)} title={editingWebhook ? 'Edit Webhook' : 'Add Webhook'}>
        <div className="space-y-4">
          <div className="space-y-1">
            <label className="label">Name</label>
            <Input value={webhookForm.name} onChange={v => setWebhookForm(f => ({ ...f, name: v }))} placeholder="Discord Notification" />
          </div>
          <div className="space-y-1">
            <label className="label">URL</label>
            <Input value={webhookForm.url} onChange={v => setWebhookForm(f => ({ ...f, url: v }))} placeholder="https://your-server.com/webhook" />
          </div>
          <div className="space-y-2">
            <label className="label">Events</label>
            <div className="flex flex-wrap gap-2">
              {webhookEvents.map(e => (
                <button
                  key={e.value}
                  onClick={() => toggleEvent(e.value)}
                  className={`px-3 py-1.5 text-xs border transition-colors ${webhookForm.events.includes(e.value) ? 'border-accent bg-accent/10 text-accent' : 'border-border text-muted hover:border-muted'}`}
                >
                  {e.label}
                </button>
              ))}
            </div>
          </div>
          <div className="space-y-1">
            <label className="label">Secret (optional)</label>
            <Input value={webhookForm.secret} onChange={v => setWebhookForm(f => ({ ...f, secret: v }))} placeholder="For HMAC signature verification" />
            <p className="text-xs text-muted">Used to sign payloads with X-WriteKit-Signature header</p>
          </div>
          {editingWebhook && (
            <label className="flex items-center gap-2 text-sm">
              <input type="checkbox" checked={webhookForm.enabled} onChange={e => setWebhookForm(f => ({ ...f, enabled: e.target.checked }))} />
              Enabled
            </label>
          )}
          <div className="flex justify-end gap-2">
            <Button variant="secondary" onClick={() => setShowWebhookModal(false)}>Cancel</Button>
            <Button variant="primary" onClick={handleSaveWebhook} loading={savingWebhook}>{editingWebhook ? 'Save' : 'Create'}</Button>
          </div>
        </div>
      </Modal>

      {/* Delete Webhook Modal */}
      <Modal open={!!deleteWebhookModal} onClose={() => setDeleteWebhookModal(null)} title="Delete Webhook">
        <p className="text-sm text-muted mb-4">Are you sure you want to delete this webhook?</p>
        <div className="flex justify-end gap-2">
          <Button variant="secondary" onClick={() => setDeleteWebhookModal(null)}>Cancel</Button>
          <Button variant="danger" onClick={handleDeleteWebhook} loading={deleteWebhookMutation.loading}>Delete</Button>
        </div>
      </Modal>
    </div>
  )
}