import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Shield, Plus, Pencil, Trash2, ExternalLink, FileCode2, Sparkles } from 'lucide-react'
import { Button } from '../components/ui/Button'
import { Input } from '../components/ui/Input'
import { useRuleSets, useUpsertRuleSet, useDeleteRuleSet } from '../hooks/useSecurity'
import type { SecurityRuleSet, UpsertRuleSetPayload } from '../api/security'
import { ConfigReloadOverlay } from '../components/LoadingStates'

/**
 * WAF Rule Presets for common security configurations
 */
const WAF_PRESETS = [
  {
    name: 'OWASP Core Rule Set',
    url: 'https://github.com/coreruleset/coreruleset/archive/refs/tags/v3.3.5.tar.gz',
    content: '',
    description: 'Industry standard protection against OWASP Top 10 vulnerabilities.',
  },
  {
    name: 'Basic SQL Injection Protection',
    url: '',
    content: `SecRule ARGS "@detectSQLi" "id:1001,phase:1,deny,status:403,msg:'SQLi Detected'"
SecRule REQUEST_BODY "@detectSQLi" "id:1002,phase:2,deny,status:403,msg:'SQLi in Body'"
SecRule REQUEST_COOKIES "@detectSQLi" "id:1003,phase:1,deny,status:403,msg:'SQLi in Cookies'"`,
    description: 'Simple rules to block common SQL injection patterns.',
  },
  {
    name: 'Basic XSS Protection',
    url: '',
    content: `SecRule ARGS "@detectXSS" "id:2001,phase:1,deny,status:403,msg:'XSS Detected'"
SecRule REQUEST_BODY "@detectXSS" "id:2002,phase:2,deny,status:403,msg:'XSS in Body'"`,
    description: 'Rules to block common Cross-Site Scripting (XSS) attacks.',
  },
  {
    name: 'Common Bad Bots',
    url: '',
    content: `SecRule REQUEST_HEADERS:User-Agent "@rx (?i)(curl|curl|python|scrapy|httpclient|libwww|nikto|sqlmap)" "id:3001,phase:1,deny,status:403,msg:'Bad Bot Detected'"
SecRule REQUEST_HEADERS:User-Agent "@streq -" "id:3002,phase:1,deny,status:403,msg:'Empty User-Agent'"`,
    description: 'Block known malicious bots and scanners.',
  },
] as const

/**
 * Confirmation dialog for destructive actions
 */
function ConfirmDialog({
  isOpen,
  title,
  message,
  confirmLabel,
  cancelLabel,
  onConfirm,
  onCancel,
  isLoading,
  deletingLabel,
}: {
  isOpen: boolean
  title: string
  message: string
  confirmLabel: string
  cancelLabel: string
  onConfirm: () => void
  onCancel: () => void
  isLoading?: boolean
  deletingLabel: string
}) {
  if (!isOpen) return null

  return (
    <div
      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
      onClick={onCancel}
      data-testid="confirm-dialog-backdrop"
    >
      <div
        className="bg-dark-card border border-gray-800 rounded-lg p-6 max-w-md w-full mx-4"
        onClick={(e) => e.stopPropagation()}
      >
        <h2 className="text-xl font-bold text-white mb-2">{title}</h2>
        <p className="text-gray-400 mb-6">{message}</p>
        <div className="flex justify-end gap-2">
          <Button variant="secondary" onClick={onCancel} disabled={isLoading}>
            {cancelLabel}
          </Button>
          <Button
            variant="danger"
            onClick={onConfirm}
            disabled={isLoading}
            data-testid="confirm-delete-btn"
          >
            {isLoading ? deletingLabel : confirmLabel}
          </Button>
        </div>
      </div>
    </div>
  )
}

/**
 * Form for creating/editing a WAF rule set
 */
function RuleSetForm({
  initialData,
  onSubmit,
  onCancel,
  isLoading,
  t,
}: {
  initialData?: SecurityRuleSet
  onSubmit: (data: UpsertRuleSetPayload) => void
  onCancel: () => void
  isLoading?: boolean
  t: (key: string) => string
}) {
  const [name, setName] = useState(initialData?.name || '')
  const [sourceUrl, setSourceUrl] = useState(initialData?.source_url || '')
  const [content, setContent] = useState(initialData?.content || '')
  const [mode, setMode] = useState<'blocking' | 'detection'>(
    initialData?.mode === 'detection' ? 'detection' : 'blocking'
  )
  const [selectedPreset, setSelectedPreset] = useState('')

  const handlePresetChange = (presetName: string) => {
    setSelectedPreset(presetName)
    if (presetName === '') return

    const preset = WAF_PRESETS.find((p) => p.name === presetName)
    if (preset) {
      setName(preset.name)
      setSourceUrl(preset.url)
      setContent(preset.content)
    }
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onSubmit({
      id: initialData?.id,
      name: name.trim(),
      source_url: sourceUrl.trim() || undefined,
      content: content.trim() || undefined,
      mode,
    })
  }

  const isValid = name.trim().length > 0 && (content.trim().length > 0 || sourceUrl.trim().length > 0)

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      {/* Presets Dropdown - only show when creating new */}
      {!initialData && (
        <div>
          <label className="block text-sm font-medium text-gray-300 mb-1.5">
            <Sparkles className="inline h-4 w-4 mr-1 text-yellow-400" />
            {t('wafConfig.quickStartPreset')}
          </label>
          <select
            value={selectedPreset}
            onChange={(e) => handlePresetChange(e.target.value)}
            className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            data-testid="preset-select"
          >
            <option value="">{t('wafConfig.choosePreset')}</option>
            {WAF_PRESETS.map((preset) => (
              <option key={preset.name} value={preset.name}>
                {preset.name}
              </option>
            ))}
          </select>
          {selectedPreset && (
            <p className="mt-1 text-xs text-gray-500">
              {WAF_PRESETS.find((p) => p.name === selectedPreset)?.description}
            </p>
          )}
        </div>
      )}

      <Input
        label={t('wafConfig.ruleSetName')}
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder={t('wafConfig.ruleSetNamePlaceholder')}
        required
        data-testid="ruleset-name-input"
      />

      <div>
        <label className="block text-sm font-medium text-gray-300 mb-1.5">{t('wafConfig.mode')}</label>
        <div className="flex gap-4">
          <label className="flex items-center gap-2 cursor-pointer">
            <input
              type="radio"
              name="mode"
              value="blocking"
              checked={mode === 'blocking'}
              onChange={() => setMode('blocking')}
              className="text-blue-600 focus:ring-blue-500"
              data-testid="mode-blocking"
            />
            <span className="text-sm text-gray-300">{t('wafConfig.blocking')}</span>
          </label>
          <label className="flex items-center gap-2 cursor-pointer">
            <input
              type="radio"
              name="mode"
              value="detection"
              checked={mode === 'detection'}
              onChange={() => setMode('detection')}
              className="text-blue-600 focus:ring-blue-500"
              data-testid="mode-detection"
            />
            <span className="text-sm text-gray-300">{t('wafConfig.detectionOnly')}</span>
          </label>
        </div>
        <p className="mt-1 text-xs text-gray-500">
          {mode === 'blocking'
            ? t('wafConfig.blockingDescription')
            : t('wafConfig.detectionDescription')}
        </p>
      </div>

      <Input
        label={t('wafConfig.sourceUrl')}
        value={sourceUrl}
        onChange={(e) => setSourceUrl(e.target.value)}
        placeholder="https://example.com/rules.conf"
        helperText={t('wafConfig.sourceUrlHelper')}
        data-testid="ruleset-url-input"
      />

      <div>
        <label className="block text-sm font-medium text-gray-300 mb-1.5">
          {t('wafConfig.ruleContent')} {!sourceUrl && <span className="text-red-400">*</span>}
        </label>
        <textarea
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder={`SecRule REQUEST_URI "@contains /admin" "id:1000,phase:1,deny,status:403"`}
          rows={10}
          className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white font-mono text-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          data-testid="ruleset-content-input"
        />
        <p className="mt-1 text-xs text-gray-500">
          {t('wafConfig.ruleContentHelper')}
        </p>
      </div>

      <div className="flex justify-end gap-2 pt-4">
        <Button type="button" variant="secondary" onClick={onCancel}>
          {t('common.cancel')}
        </Button>
        <Button type="submit" disabled={!isValid || isLoading} isLoading={isLoading}>
          {initialData ? t('wafConfig.updateRuleSet') : t('wafConfig.createRuleSet')}
        </Button>
      </div>
    </form>
  )
}

/**
 * WAF Configuration Page - Manage Coraza rule sets
 */
export default function WafConfig() {
  const { t } = useTranslation()
  const { data: ruleSets, isLoading, error } = useRuleSets()
  const upsertMutation = useUpsertRuleSet()
  const deleteMutation = useDeleteRuleSet()

  const [showCreateForm, setShowCreateForm] = useState(false)
  const [editingRuleSet, setEditingRuleSet] = useState<SecurityRuleSet | null>(null)
  const [deleteConfirm, setDeleteConfirm] = useState<SecurityRuleSet | null>(null)

  // Determine if any security operation is in progress
  const isApplyingConfig = upsertMutation.isPending || deleteMutation.isPending

  // Determine contextual message based on operation
  const getMessage = () => {
    if (upsertMutation.isPending) {
      return editingRuleSet
        ? { message: t('wafConfig.cerberusAwakens'), submessage: t('wafConfig.guardianStandsWatch') }
        : { message: t('wafConfig.forgingDefenses'), submessage: t('wafConfig.rulesInscribing') }
    }
    if (deleteMutation.isPending) {
      return { message: t('wafConfig.loweringBarrier'), submessage: t('wafConfig.defenseLayerRemoved') }
    }
    return { message: t('wafConfig.cerberusAwakens'), submessage: t('wafConfig.guardianStandsWatch') }
  }

  const { message, submessage } = getMessage()

  const handleCreate = (data: UpsertRuleSetPayload) => {
    upsertMutation.mutate(data, {
      onSuccess: () => setShowCreateForm(false),
    })
  }

  const handleUpdate = (data: UpsertRuleSetPayload) => {
    upsertMutation.mutate(data, {
      onSuccess: () => setEditingRuleSet(null),
    })
  }

  const handleDelete = () => {
    if (!deleteConfirm) return
    deleteMutation.mutate(deleteConfirm.id, {
      onSuccess: () => {
        setDeleteConfirm(null)
        setEditingRuleSet(null)
      },
    })
  }

  if (isLoading) {
    return (
      <div className="p-8 text-center text-white" data-testid="waf-loading">
        {t('wafConfig.loadingConfiguration')}
      </div>
    )
  }

  if (error) {
    return (
      <div className="p-8 text-center text-red-400" data-testid="waf-error">
        {t('wafConfig.failedToLoad')}: {error instanceof Error ? error.message : t('common.unknownError')}
      </div>
    )
  }

  const ruleSetList = ruleSets?.rulesets || []

  return (
    <>
      {isApplyingConfig && (
        <ConfigReloadOverlay
          message={message}
          submessage={submessage}
          type="cerberus"
        />
      )}
      <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white flex items-center gap-2">
            <Shield className="w-7 h-7 text-blue-400" />
            {t('wafConfig.title')}
          </h1>
          <p className="text-gray-400 mt-1">
            {t('wafConfig.description')}
          </p>
        </div>
        <div className="flex gap-2">
          <Button
            variant="secondary"
            size="sm"
            onClick={() =>
              window.open('https://coraza.io/docs/seclang/directives/', '_blank')
            }
          >
            <ExternalLink className="h-4 w-4 mr-2" />
            {t('wafConfig.ruleSyntax')}
          </Button>
          <Button onClick={() => setShowCreateForm(true)} data-testid="create-ruleset-btn">
            <Plus className="h-4 w-4 mr-2" />
            {t('wafConfig.addRuleSet')}
          </Button>
        </div>
      </div>

      {/* Info Banner */}
      <div className="bg-blue-900/20 border border-blue-800/50 rounded-lg p-4">
        <div className="flex items-start gap-3">
          <FileCode2 className="h-5 w-5 text-blue-400 flex-shrink-0 mt-0.5" />
          <div>
            <h3 className="text-sm font-semibold text-blue-300 mb-1">
              {t('wafConfig.aboutTitle')}
            </h3>
            <p className="text-sm text-blue-200/90">
              {t('wafConfig.aboutDescription')}
            </p>
          </div>
        </div>
      </div>

      {/* Create Form */}
      {showCreateForm && (
        <div className="bg-dark-card border border-gray-800 rounded-lg p-6">
          <h2 className="text-xl font-bold text-white mb-4">{t('wafConfig.createRuleSet')}</h2>
          <RuleSetForm
            onSubmit={handleCreate}
            onCancel={() => setShowCreateForm(false)}
            isLoading={upsertMutation.isPending}
            t={t}
          />
        </div>
      )}

      {/* Edit Form */}
      {editingRuleSet && (
        <div className="bg-dark-card border border-gray-800 rounded-lg p-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-bold text-white">{t('wafConfig.editRuleSet')}</h2>
            <Button
              variant="danger"
              size="sm"
              onClick={() => setDeleteConfirm(editingRuleSet)}
            >
              <Trash2 className="h-4 w-4 mr-2" />
              {t('common.delete')}
            </Button>
          </div>
          <RuleSetForm
            initialData={editingRuleSet}
            onSubmit={handleUpdate}
            onCancel={() => setEditingRuleSet(null)}
            isLoading={upsertMutation.isPending}
            t={t}
          />
        </div>
      )}

      {/* Delete Confirmation */}
      <ConfirmDialog
        isOpen={deleteConfirm !== null}
        title={t('wafConfig.deleteRuleSet')}
        message={t('wafConfig.deleteConfirmation', { name: deleteConfirm?.name })}
        confirmLabel={t('common.delete')}
        cancelLabel={t('common.cancel')}
        deletingLabel={t('common.deleting')}
        onConfirm={handleDelete}
        onCancel={() => setDeleteConfirm(null)}
        isLoading={deleteMutation.isPending}
      />

      {/* Empty State */}
      {ruleSetList.length === 0 && !showCreateForm && !editingRuleSet && (
        <div
          className="bg-dark-card border border-gray-800 rounded-lg p-12 text-center"
          data-testid="waf-empty-state"
        >
          <div className="text-gray-500 mb-4 text-4xl">🛡️</div>
          <h3 className="text-lg font-semibold text-white mb-2">{t('wafConfig.noRuleSets')}</h3>
          <p className="text-gray-400 mb-4">
            {t('wafConfig.noRuleSetsDescription')}
          </p>
          <Button onClick={() => setShowCreateForm(true)}>
            <Plus className="h-4 w-4 mr-2" />
            {t('wafConfig.createRuleSet')}
          </Button>
        </div>
      )}

      {/* Rule Sets Table */}
      {ruleSetList.length > 0 && !showCreateForm && !editingRuleSet && (
        <div className="bg-dark-card border border-gray-800 rounded-lg overflow-hidden">
          <table className="w-full" data-testid="rulesets-table">
            <thead className="bg-gray-900/50 border-b border-gray-800">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase">
                  {t('common.name')}
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase">
                  {t('wafConfig.mode')}
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase">
                  {t('wafConfig.source')}
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase">
                  {t('wafConfig.lastUpdated')}
                </th>
                <th className="px-6 py-3 text-right text-xs font-medium text-gray-400 uppercase">
                  {t('common.actions')}
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-800">
              {ruleSetList.map((rs) => (
                <tr key={rs.id} className="hover:bg-gray-900/30">
                  <td className="px-6 py-4">
                    <p className="font-medium text-white">{rs.name}</p>
                    {rs.content && (
                      <p className="text-xs text-gray-500 mt-1">
                        {t('wafConfig.ruleCount', { count: rs.content.split('\n').filter((l) => l.trim()).length })}
                      </p>
                    )}
                  </td>
                  <td className="px-6 py-4">
                    <span
                      className={`px-2 py-1 text-xs rounded ${
                        rs.mode === 'blocking'
                          ? 'bg-red-900/30 text-red-300'
                          : 'bg-yellow-900/30 text-yellow-300'
                      }`}
                    >
                      {rs.mode === 'blocking' ? t('wafConfig.blocking') : t('wafConfig.detection')}
                    </span>
                  </td>
                  <td className="px-6 py-4">
                    {rs.source_url ? (
                      <a
                        href={rs.source_url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-sm text-blue-400 hover:underline flex items-center gap-1"
                      >
                        {t('wafConfig.url')}
                        <ExternalLink className="h-3 w-3" />
                      </a>
                    ) : (
                      <span className="text-sm text-gray-500">{t('wafConfig.inline')}</span>
                    )}
                  </td>
                  <td className="px-6 py-4 text-sm text-gray-400">
                    {rs.last_updated
                      ? new Date(rs.last_updated).toLocaleDateString()
                      : '-'}
                  </td>
                  <td className="px-6 py-4">
                    <div className="flex justify-end gap-2">
                      <button
                        onClick={() => setEditingRuleSet(rs)}
                        className="text-gray-400 hover:text-blue-400"
                        title={t('common.edit')}
                        data-testid={`edit-ruleset-${rs.id}`}
                      >
                        <Pencil className="h-4 w-4" />
                      </button>
                      <button
                        onClick={() => setDeleteConfirm(rs)}
                        className="text-gray-400 hover:text-red-400"
                        title={t('common.delete')}
                        data-testid={`delete-ruleset-${rs.id}`}
                      >
                        <Trash2 className="h-4 w-4" />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
      </div>
    </>
  )
}