import { useState } from 'react';
import type { HarnessAgent } from '../../types';

interface DelegateTaskModalProps {
  agents: HarnessAgent[];
  onClose: () => void;
  onDelegate: (agentId: string, title: string, description: string) => void;
}

export default function DelegateTaskModal({
  agents,
  onClose,
  onDelegate,
}: DelegateTaskModalProps) {
  const [agentId, setAgentId] = useState(agents[0]?.id ?? '');
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!title.trim()) return;
    onDelegate(agentId, title.trim(), description.trim());
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      <div
        className="absolute inset-0 bg-ink-black/20 z-0"
        onClick={onClose}
        onKeyDown={(e) => { if (e.key === 'Escape') onClose(); }}
        role="button"
        tabIndex={-1}
        aria-label="Close modal"
      />
      <div className="relative z-10 bg-paper-white border border-border-default w-full max-w-lg mx-4 rounded-xl shadow-lg overflow-hidden">
        <div className="px-6 py-4 border-b border-border-default">
          <h3 className="text-base font-bold text-ink-black">
            에이전트에 태스크 위임
          </h3>
        </div>

        <form onSubmit={handleSubmit} className="p-6 space-y-5">
          <div>
            <label
              htmlFor="agent-select"
              className="block text-xs font-semibold text-ink-dark mb-1.5"
            >
              대상 에이전트
            </label>
            <select
              id="agent-select"
              value={agentId}
              onChange={(e) => setAgentId(e.target.value)}
              className="w-full border border-border-default bg-paper-white px-3 py-2 text-sm text-ink-black focus:outline-none focus:border-accent-teal"
            >
              {agents.map((a) => (
                <option key={a.id} value={a.id}>
                  {a.name}
                </option>
              ))}
            </select>
          </div>

          <div>
            <label
              htmlFor="task-title"
              className="block text-xs font-semibold text-ink-dark mb-1.5"
            >
              태스크 제목
            </label>
            <input
              id="task-title"
              type="text"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder="예: (주)그린에너지 2026-Q2 데이터 검증"
              className="w-full border border-border-default bg-paper-white px-3 py-2 text-sm text-ink-black placeholder:text-ink-light focus:outline-none focus:border-accent-teal"
            />
          </div>

          <div>
            <label
              htmlFor="task-desc"
              className="block text-xs font-semibold text-ink-dark mb-1.5"
            >
              상세 설명 (선택)
            </label>
            <textarea
              id="task-desc"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              rows={3}
              placeholder="에이전트에게 전달할 추가 지침을 입력하세요."
              className="w-full border border-border-default bg-paper-white px-3 py-2 text-sm text-ink-black placeholder:text-ink-light focus:outline-none focus:border-accent-teal resize-none"
            />
          </div>

          <div className="flex justify-end gap-3 pt-2">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 text-sm text-ink-medium border border-border-default rounded-md hover:border-border-strong transition-colors"
            >
              취소
            </button>
            <button
              type="submit"
              disabled={!title.trim()}
              className="px-4 py-2 text-sm font-semibold text-white bg-accent-teal hover:bg-accent-teal/90 rounded-md disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
            >
              위임하기
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}