import { useState } from 'react'
import { ArrowLeft, Terminal, Download, Loader2, AlertTriangle, Copy, Check, ShieldAlert } from 'lucide-react'
import { cn } from '@/lib/utils'
import { useScriptGeneratorStore } from '@/store/scriptGeneratorStore'
import { ScriptParameterForm } from './ScriptParameterForm'

const COMPLEXITY_CLASSES = {
  beginner: 'text-emerald-400 bg-emerald-400/10 border-emerald-400/20',
  intermediate: 'text-amber-400 bg-amber-400/10 border-amber-400/20',
  advanced: 'text-rose-500 bg-rose-500/10 border-rose-500/20',
} as const

interface Props {
  canGenerate: boolean
  onBack: () => void
}

export function ScriptConfigurePane({ canGenerate, onBack }: Props) {
  const selectedTemplate = useScriptGeneratorStore(s => s.selectedTemplate)
  const isLoadingDetail = useScriptGeneratorStore(s => s.isLoadingDetail)
  const categories = useScriptGeneratorStore(s => s.categories)
  const generatedScript = useScriptGeneratorStore(s => s.generatedScript)
  const generationWarnings = useScriptGeneratorStore(s => s.generationWarnings)
  const isGenerating = useScriptGeneratorStore(s => s.isGenerating)
  const generateError = useScriptGeneratorStore(s => s.generateError)
  const generate = useScriptGeneratorStore(s => s.generate)

  const [copied, setCopied] = useState(false)

  const handleCopy = async () => {
    if (!generatedScript) return
    try {
      await navigator.clipboard.writeText(generatedScript)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch {
      // silently fail
    }
  }

  const handleDownload = () => {
    if (!generatedScript || !selectedTemplate) return
    const blob = new Blob([generatedScript], { type: 'text/plain' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `${selectedTemplate.slug}.ps1`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
  }

  // Loading state
  if (isLoadingDetail) {
    return (
      <div className="card-flat h-full flex flex-col p-4 overflow-y-auto">
        <button
          type="button"
          onClick={onBack}
          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors mb-4 w-fit"
        >
          <ArrowLeft size={12} />
          Back to library
        </button>
        <div className="flex-1 flex items-center justify-center">
          <Loader2 size={28} className="text-primary animate-spin" />
        </div>
      </div>
    )
  }

  // First-selection failure state
  if (!selectedTemplate) {
    return (
      <div className="card-flat h-full flex flex-col p-4 overflow-y-auto">
        <button
          type="button"
          onClick={onBack}
          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors mb-4 w-fit"
        >
          <ArrowLeft size={12} />
          Back to library
        </button>
        <div className="flex-1 flex flex-col items-center justify-center gap-3 text-center">
          <Terminal size={32} className="text-muted-foreground/40" />
          <p className="text-sm text-muted-foreground">Failed to load template.</p>
        </div>
      </div>
    )
  }

  const categoryName = categories.find(c => c.id === selectedTemplate.category_id)?.name
  const displayTags = selectedTemplate.tags.slice(0, 3)
  const extraTagCount = selectedTemplate.tags.length - 3

  return (
    <div className="card-flat h-full flex flex-col p-4 overflow-y-auto">
      {/* Back button */}
      <button
        type="button"
        onClick={onBack}
        className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors mb-4 w-fit"
      >
        <ArrowLeft size={12} />
        Back to library
      </button>

      {/* Template header */}
      <div className="mb-3">
        <h2 className="text-base font-semibold font-heading text-foreground">
          {selectedTemplate.name}
        </h2>
        {selectedTemplate.description && (
          <p className="text-sm text-muted-foreground mt-0.5">{selectedTemplate.description}</p>
        )}
        <div className="flex items-center gap-1.5 flex-wrap mt-2">
          {selectedTemplate.requires_elevation && (
            <span
              title="Requires administrator elevation"
              className="inline-flex items-center gap-1 font-sans text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded border text-amber-400 bg-amber-400/10 border-amber-400/20"
            >
              <ShieldAlert size={11} />
              Elevated
            </span>
          )}
          <span className={cn(
            'font-sans text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded border',
            COMPLEXITY_CLASSES[selectedTemplate.complexity]
          )}>
            {selectedTemplate.complexity}
          </span>
          {categoryName && (
            <span className="font-sans text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded border border-border text-muted-foreground bg-white/5">
              {categoryName}
            </span>
          )}
          {displayTags.map(tag => (
            <span key={tag} className="font-sans text-[0.625rem] px-1.5 py-0.5 rounded border border-border text-muted-foreground bg-white/5">
              {tag}
            </span>
          ))}
          {extraTagCount > 0 && (
            <span className="font-sans text-[0.625rem] text-muted-foreground">+{extraTagCount}</span>
          )}
        </div>
      </div>

      <div className="border-t border-border mt-3 pt-3" />

      {/* Parameter form */}
      <ScriptParameterForm canGenerate={canGenerate} />

      {/* Warnings */}
      {generationWarnings.length > 0 && (
        <div className="flex flex-col gap-1 rounded-lg border border-amber-400/20 bg-amber-400/5 p-3 mt-4">
          <div className="flex items-center gap-1.5 text-amber-400 text-xs font-medium mb-1">
            <AlertTriangle size={13} />
            Warnings
          </div>
          {generationWarnings.map((w) => (
            <p key={w} className="text-xs text-amber-400/80">{w}</p>
          ))}
        </div>
      )}

      {/* Action bar */}
      <div className="flex flex-col gap-2 mt-4 pt-1">
        <span title={!canGenerate ? 'Engineer access required' : undefined}>
          <button
            type="button"
            onClick={() => generate()}
            disabled={isGenerating || !canGenerate}
            className="w-full flex items-center justify-center gap-1.5 bg-primary text-white font-semibold text-sm px-4 py-2 rounded-lg hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100"
          >
            {isGenerating && <Loader2 size={14} className="animate-spin" />}
            Generate Script
          </button>
        </span>

        <div className="flex gap-2">
          <span className="flex-1" title={!canGenerate ? 'Engineer access required' : undefined}>
            <button
              type="button"
              onClick={handleDownload}
              disabled={!generatedScript || !canGenerate}
              className="w-full flex items-center justify-center gap-1.5 bg-white/5 border border-border text-foreground text-sm px-4 py-2 rounded-[10px] hover:border-[rgba(255,255,255,0.12)] transition-all disabled:opacity-50 disabled:cursor-not-allowed"
            >
              <Download size={14} />
              Download .ps1
            </button>
          </span>

          <span className="flex-1" title={!canGenerate ? 'Engineer access required' : undefined}>
            <button
              type="button"
              onClick={handleCopy}
              disabled={!generatedScript || !canGenerate}
              className="w-full flex items-center justify-center gap-1.5 bg-white/5 border border-border text-foreground text-sm px-4 py-2 rounded-[10px] hover:border-[rgba(255,255,255,0.12)] transition-all disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {copied ? <Check size={14} className="text-emerald-400" /> : <Copy size={14} />}
              {copied ? 'Copied!' : 'Copy'}
            </button>
          </span>
        </div>
      </div>

      {/* Generate error */}
      {generateError && (
        <p className="text-xs text-rose-500 mt-2">{generateError}</p>
      )}
    </div>
  )
}
