'use client';

import { FormEvent, useState } from 'react';

export function BoardingMissionForm({
  onDock,
  onCancel,
  autoFocus = false,
  compact = false,
}: {
  onDock: (mission: string) => void;
  onCancel?: () => void;
  autoFocus?: boolean;
  compact?: boolean;
}) {
  const [mission, setMission] = useState('');
  const trimmedMission = mission.trim();
  const canSubmit = Boolean(trimmedMission);

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (!canSubmit) return;
    onDock(trimmedMission);
  };

  return (
    <form
      onSubmit={handleSubmit}
      className={`flex flex-col ${compact ? 'gap-6' : 'space-y-8 flex-1'}`}
    >
      <div className="space-y-3">
        <label className="block text-sm font-medium text-slate-300">
          이번 항해의 핵심 목표
        </label>
        <input
          type="text"
          value={mission}
          onChange={(event) => setMission(event.target.value)}
          placeholder="예: 서론 3문단 완성하기"
          className="w-full border-b-2 border-slate-700 bg-slate-900/50 px-0 py-3 text-lg outline-none transition-colors placeholder:text-slate-600 focus:border-indigo-500"
          autoFocus={autoFocus}
        />
      </div>

      <div className={`flex ${compact ? 'justify-end gap-3' : 'mt-8 flex-col gap-3'} w-full`}>
        {onCancel && (
          <button
            type="button"
            onClick={onCancel}
            className="rounded-xl border border-slate-700 bg-transparent px-4 py-2 font-semibold text-slate-300 transition-colors hover:bg-slate-900/60 hover:text-white"
          >
            취소
          </button>
        )}
        <button
          type="submit"
          disabled={!canSubmit}
          className={`rounded-xl bg-indigo-600 font-bold text-white transition-all shadow-lg shadow-indigo-900/30 hover:bg-indigo-500 disabled:bg-slate-800 disabled:text-slate-500 ${compact ? 'px-6 py-2' : 'w-full py-4 text-lg'}`}
        >
          도킹 완료 (출항)
        </button>
      </div>
    </form>
  );
}