import { useEffect, useState } from 'react'
import { Plus, Pencil, Trash2, Server } from 'lucide-react'
import { targetListsApi } from '@/api'
import type { TargetList, TargetListCreate, TargetEntry } from '@/types'
import { toast } from '@/lib/toast'
import { ConfirmDialog } from '@/components/common/ConfirmDialog'
import { Modal } from '@/components/common/Modal'
import { Spinner } from '@/components/common/Spinner'
import { EmptyState } from '@/components/common/EmptyState'
import { PageHeader } from '@/components/common/PageHeader'

export default function TargetListsPage() {
  const [lists, setLists] = useState<TargetList[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [showEditor, setShowEditor] = useState(false)
  const [editingList, setEditingList] = useState<TargetList | null>(null)
  const [deleteTarget, setDeleteTarget] = useState<TargetList | null>(null)

  // Editor state
  const [editorName, setEditorName] = useState('')
  const [editorDescription, setEditorDescription] = useState('')
  const [editorTargets, setEditorTargets] = useState('')
  const [isSaving, setIsSaving] = useState(false)

  const load = async () => {
    try {
      const data = await targetListsApi.list()
      setLists(data)
    } catch {
      toast.error('Failed to load target lists')
    } finally {
      setIsLoading(false)
    }
  }

  useEffect(() => { load() }, [])

  const openEditor = (list?: TargetList) => {
    if (list) {
      setEditingList(list)
      setEditorName(list.name)
      setEditorDescription(list.description ?? '')
      setEditorTargets(list.targets.map(t => t.notes ? `${t.label} # ${t.notes}` : t.label).join('\n'))
    } else {
      setEditingList(null)
      setEditorName('')
      setEditorDescription('')
      setEditorTargets('')
    }
    setShowEditor(true)
  }

  const parseTargets = (raw: string): TargetEntry[] =>
    raw.split('\n')
      .map(l => l.trim())
      .filter(Boolean)
      .map(line => {
        const hashIdx = line.indexOf('#')
        if (hashIdx === -1) return { label: line }
        return {
          label: line.slice(0, hashIdx).trim(),
          notes: line.slice(hashIdx + 1).trim() || undefined,
        }
      })

  const handleSave = async () => {
    if (!editorName.trim()) { toast.error('Name is required'); return }
    const targets = parseTargets(editorTargets)
    if (targets.length === 0) { toast.error('Add at least one target'); return }

    setIsSaving(true)
    try {
      const payload: TargetListCreate = {
        name: editorName.trim(),
        description: editorDescription.trim() || undefined,
        targets,
      }
      if (editingList) {
        const updated = await targetListsApi.update(editingList.id, payload)
        setLists(prev => prev.map(l => l.id === updated.id ? updated : l))
        toast.success('Target list updated')
      } else {
        const created = await targetListsApi.create(payload)
        setLists(prev => [...prev, created])
        toast.success('Target list created')
      }
      setShowEditor(false)
    } catch {
      toast.error('Failed to save target list')
    } finally {
      setIsSaving(false)
    }
  }

  const handleDelete = async () => {
    if (!deleteTarget) return
    try {
      await targetListsApi.delete(deleteTarget.id)
      setLists(prev => prev.filter(l => l.id !== deleteTarget.id))
      toast.success('Target list deleted')
    } catch {
      toast.error('Failed to delete target list')
    } finally {
      setDeleteTarget(null)
    }
  }

  return (
    <div className="space-y-6">
      <PageHeader
        title="Target Lists"
        titleClassName="text-xl font-semibold"
        description="Saved server lists for maintenance flow batch launching"
        action={(
          <button
            onClick={() => openEditor()}
            className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
          >
            <Plus className="h-4 w-4" />
            New List
          </button>
        )}
      />

      {isLoading ? (
        <div className="flex h-32 items-center justify-center">
          <Spinner size="sm" className="h-5 w-5 border-primary border-t-transparent" />
        </div>
      ) : lists.length === 0 ? (
        <EmptyState
          icon={<Server className="h-10 w-10" />}
          title="No target lists yet"
          description="Create lists of servers to reuse across maintenance runs."
        />
      ) : (
        <div className="space-y-3">
          {lists.map(list => (
            <div
              key={list.id}
              className="flex items-center justify-between rounded-xl border border-border bg-card px-5 py-4"
            >
              <div>
                <p className="font-medium text-foreground">{list.name}</p>
                {list.description && (
                  <p className="text-[0.8125rem] text-muted-foreground">{list.description}</p>
                )}
                <p className="mt-0.5 font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
                  {list.targets.length} target{list.targets.length !== 1 ? 's' : ''}
                  {list.targets.length > 0 && (
                    <> &middot; {list.targets.slice(0, 3).map(t => t.label).join(', ')}{list.targets.length > 3 ? '\u2026' : ''}</>
                  )}
                </p>
              </div>
              <div className="flex items-center gap-1">
                <button
                  onClick={() => openEditor(list)}
                  className="rounded-lg p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
                  title="Edit"
                >
                  <Pencil className="h-4 w-4" />
                </button>
                <button
                  onClick={() => setDeleteTarget(list)}
                  className="rounded-lg p-2 text-muted-foreground hover:bg-accent hover:text-red-400"
                  title="Delete"
                >
                  <Trash2 className="h-4 w-4" />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Editor Modal */}
      <Modal
        isOpen={showEditor}
        onClose={() => setShowEditor(false)}
        title={editingList ? 'Edit Target List' : 'New Target List'}
        size="md"
        footer={(
          <div className="flex justify-end gap-2">
            <button
              onClick={() => setShowEditor(false)}
              className="rounded-lg border border-border px-4 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
            >
              Cancel
            </button>
            <button
              onClick={handleSave}
              disabled={isSaving}
              className="rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-50"
            >
              {isSaving ? 'Saving\u2026' : 'Save'}
            </button>
          </div>
        )}
      >
        <div className="space-y-4">
          <div>
            <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
              Name
            </label>
            <input
              type="text"
              value={editorName}
              onChange={e => setEditorName(e.target.value)}
              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
              placeholder="e.g. RDS Farm A"
            />
          </div>
          <div>
            <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
              Description (optional)
            </label>
            <input
              type="text"
              value={editorDescription}
              onChange={e => setEditorDescription(e.target.value)}
              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
              placeholder="e.g. Production RDS servers"
            />
          </div>
          <div>
            <label className="mb-1 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
              Targets &mdash; one per line (add notes after #)
            </label>
            <textarea
              value={editorTargets}
              onChange={e => setEditorTargets(e.target.value)}
              rows={6}
              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
              placeholder={"RDS-01 # 192.168.1.10\nRDS-02\nRDS-03 # Backup server"}
            />
          </div>
        </div>
      </Modal>

      {deleteTarget && (
        <ConfirmDialog
          isOpen={!!deleteTarget}
          onClose={() => setDeleteTarget(null)}
          onConfirm={handleDelete}
          title="Delete Target List"
          message={`Delete "${deleteTarget.name}"? This cannot be undone.`}
          confirmLabel="Delete"
          confirmVariant="destructive"
        />
      )}
    </div>
  )
}
