import React from 'react';
import { X } from 'lucide-react';

interface CreateWorkspaceModalProps {
  isOpen: boolean;
  tickerDraft: string;
  isSubmitting?: boolean;
  error?: string | null;
  onClose: () => void;
  onTickerChange: (ticker: string) => void;
  onSubmit: () => void;
}

export const CreateWorkspaceModal: React.FC<CreateWorkspaceModalProps> = ({
  isOpen,
  tickerDraft,
  isSubmitting = false,
  error,
  onClose,
  onTickerChange,
  onSubmit,
}) => {
  if (!isOpen) {
    return null;
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
      <div className="mx-4 w-full max-w-md rounded-2xl border border-term-border bg-term-elevated shadow-xl">
        <div className="flex items-center justify-between border-b border-term-border bg-term-surface px-6 py-4">
          <h2 className="text-lg font-semibold text-term-text">Create Research Workspace</h2>
          <button
            type="button"
            onClick={onClose}
            className="rounded-lg p-1 text-term-text-tertiary transition-colors hover:bg-term-bg hover:text-term-text"
            aria-label="Close modal"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        <div className="space-y-4 p-6">
          <div>
            <label htmlFor="ticker" className="mb-2 block text-sm font-medium text-term-text-tertiary">
              Primary Ticker Symbol
            </label>
            <input
              id="ticker"
              type="text"
              value={tickerDraft}
              onChange={(event) => onTickerChange(event.target.value.toUpperCase())}
              onKeyDown={(event) => {
                if (event.key === 'Enter' && tickerDraft.trim()) {
                  onSubmit();
                }
              }}
              placeholder="e.g., AAPL, MSFT, GOOGL"
              className="w-full rounded-xl border border-term-border bg-term-bg px-4 py-3 text-sm text-term-text placeholder:text-term-text-tertiary outline-none transition-colors focus:border-info"
              autoFocus
              required
            />
            <p className="mt-2 text-xs text-term-text-tertiary">
              Enter the primary ticker symbol for this research workspace.
            </p>
          </div>

          {error ? (
            <div className="rounded border border-negative/40 bg-negative/10 px-3 py-2 text-xs font-mono text-negative">
              {error}
            </div>
          ) : null}

          <div className="flex justify-end gap-3">
            <button
              type="button"
              onClick={onClose}
              className="rounded-xl px-4 py-2 text-sm font-medium text-term-text-tertiary transition-colors hover:bg-term-bg hover:text-term-text"
              disabled={isSubmitting}
            >
              Cancel
            </button>
            <button
              type="button"
              onClick={onSubmit}
              disabled={isSubmitting || !tickerDraft.trim()}
              className="rounded-xl bg-info px-4 py-2 text-sm font-medium text-term-bg transition-colors hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
            >
              {isSubmitting ? 'Creating...' : 'Create Workspace'}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};
