resolutionflow/frontend/src/components/maintenance/BatchLaunchModal.tsx

import { useState, useEffect } from 'react'
import { X, List, Clock, PenLine, ExternalLink } from 'lucide-react'
import { cn } from '@/lib/utils'
import { toast } from '@/lib/toast'
import { targetListsApi, batchLaunchApi } from '@/api'
import type { TargetList, TargetEntry } from '@/types'
import { Spinner } from '@/components/common/Spinner'

interface BatchLaunchModalProps {
  treeId: string
  treeName: string
  onClose: () => void
  onLaunched: (batchId: string, count: number) => void
}

type TabId = 'manual' | 'saved' | 'previous' | 'psa'

export function BatchLaunchModal({ treeId, treeName, onClose, onLaunched }: BatchLaunchModalProps) {
  const [activeTab, setActiveTab] = useState<TabId>('manual')
  const [savedLists, setSavedLists] = useState<TargetList[] | null>(null)
  const [selectedListId, setSelectedListId] = useState<string | null>(null)
  const [manualInput, setManualInput] = useState('')
  const [isLaunching, setIsLaunching] = useState(false)

  useEffect(() => {
    if (activeTab === 'saved' && savedLists === null) {
      targetListsApi.list()
        .then(setSavedLists)
        .catch(() => toast.error('Failed to load saved lists'))
    }
  }, [activeTab, savedLists])

  const getTargets = (): TargetEntry[] => {
    if (activeTab === 'saved' && selectedListId && savedLists) {
      const list = savedLists.find(l => l.id === selectedListId)
      return list?.targets ?? []
    }
    if (activeTab === 'manual') {
      return manualInput
        .split('\n')
        .map(l => l.trim())
        .filter(Boolean)
        .map(label => ({ label }))
    }
    return []
  }

  const targets = getTargets()

  const handleLaunch = async () => {
    if (targets.length === 0) {
      toast.error('Add at least one target before launching')
      return
    }
    if (targets.length > 100) {
      toast.error('Maximum 100 targets per batch')
      return
    }
    setIsLaunching(true)
    try {
      const result = await batchLaunchApi.launch({ tree_id: treeId, targets })
      toast.success(`${result.count} sessions created`)
      onLaunched(result.batch_id, result.count)
    } catch {
      toast.error('Failed to launch batch')
    } finally {
      setIsLaunching(false)
    }
  }

  const tabs: { id: TabId; label: string; icon: React.ReactNode }[] = [
    { id: 'manual', label: 'Manual Entry', icon: <PenLine className="h-3.5 w-3.5" /> },
    { id: 'saved', label: 'Saved List', icon: <List className="h-3.5 w-3.5" /> },
    { id: 'previous', label: 'Previous Run', icon: <Clock className="h-3.5 w-3.5" /> },
    { id: 'psa', label: 'PSA / RMM', icon: <ExternalLink className="h-3.5 w-3.5" /> },
  ]

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs">
      <div className="w-full max-w-lg rounded-xl border border-border bg-card shadow-2xl">
        {/* Header */}
        <div className="flex items-center justify-between border-b border-border px-6 py-4">
          <div>
            <h2 className="text-base font-semibold text-foreground">Batch Launch</h2>
            <p className="text-[0.8125rem] text-muted-foreground">{treeName}</p>
          </div>
          <button onClick={onClose} className="rounded-lg p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">
            <X className="h-4 w-4" />
          </button>
        </div>

        {/* Tabs */}
        <div className="flex border-b border-border px-4 pt-2">
          {tabs.map(tab => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={cn(
                "flex items-center gap-1.5 px-3 py-2 font-label text-[0.6875rem] uppercase tracking-wide transition-colors",
                activeTab === tab.id
                  ? "border-b-2 border-primary text-foreground"
                  : "text-muted-foreground hover:text-foreground"
              )}
            >
              {tab.icon}
              {tab.label}
            </button>
          ))}
        </div>

        {/* Content */}
        <div className="p-6">
          {activeTab === 'manual' && (
            <div className="space-y-2">
              <label className="font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
                Server names (one per line)
              </label>
              <textarea
                className="h-40 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-hidden focus:ring-1 focus:ring-primary/20"
                placeholder={"RDS-01\nRDS-02\nRDS-03"}
                value={manualInput}
                onChange={e => setManualInput(e.target.value)}
              />
            </div>
          )}

          {activeTab === 'saved' && (
            <div className="space-y-2">
              {savedLists === null ? (
                <div className="flex h-24 items-center justify-center">
                  <Spinner size="sm" className="border-primary border-t-transparent" />
                </div>
              ) : savedLists.length === 0 ? (
                <p className="text-[0.875rem] text-muted-foreground">
                  No saved lists yet. Create one in Team Settings &rarr; Target Lists.
                </p>
              ) : (
                savedLists.map(list => (
                  <button
                    key={list.id}
                    onClick={() => setSelectedListId(list.id)}
                    className={cn(
                      "w-full rounded-lg border px-4 py-3 text-left transition-colors",
                      selectedListId === list.id
                        ? "border-primary/30 bg-primary/10 text-foreground"
                        : "border-border text-muted-foreground hover:bg-accent hover:text-foreground"
                    )}
                  >
                    <div className="font-medium">{list.name}</div>
                    <div className="text-[0.8125rem]">{list.targets.length} targets</div>
                  </button>
                ))
              )}
            </div>
          )}

          {activeTab === 'previous' && (
            <p className="text-[0.875rem] text-muted-foreground">Previous run history coming soon.</p>
          )}

          {activeTab === 'psa' && (
            <div className="rounded-lg border border-border bg-accent/30 p-6 text-center">
              <ExternalLink className="mx-auto mb-2 h-8 w-8 text-muted-foreground" />
              <p className="font-medium text-foreground">PSA / RMM Import</p>
              <p className="mt-1 text-[0.8125rem] text-muted-foreground">
                ConnectWise, Kaseya, and RMM integrations coming soon.
              </p>
            </div>
          )}
        </div>

        {/* Preview */}
        {targets.length > 0 && (
          <div className="border-t border-border px-6 py-3">
            <p className="text-[0.8125rem] text-muted-foreground">
              Will create{' '}
              <span className="font-semibold text-foreground">{targets.length} sessions</span>:{' '}
              {targets.slice(0, 5).map(t => t.label).join(', ')}
              {targets.length > 5 && ` +${targets.length - 5} more`}
            </p>
          </div>
        )}

        {/* Footer */}
        <div className="flex justify-end gap-2 border-t border-border px-6 py-4">
          <button
            onClick={onClose}
            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={handleLaunch}
            disabled={isLaunching || targets.length === 0}
            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"
          >
            {isLaunching ? 'Launching\u2026' : targets.length > 0 ? `Launch ${targets.length} Sessions` : 'Launch'}
          </button>
        </div>
      </div>
    </div>
  )
}