import React, { useState } from 'react';
import { Button } from '../../ui/button';
import { Input } from '../../ui/input';
import { X, Layers } from 'lucide-react';

interface CreateProjectModalProps {
  onClose: () => void;
  onCreate: (project: any) => void;
}

export const CreateProjectModal: React.FC<CreateProjectModalProps> = ({
  onClose,
  onCreate,
}) => {
  const [formData, setFormData] = useState({
    name: '',
    daw: 'Ableton',
    bpm: '128',
    key: 'C Min',
    description: '',
  });

  const handleSubmit = () => {
    if (!formData.name) return;
    onCreate({
      ...formData,
      progress: 0,
      status: 'Idea',
      collaborators: [],
      modified: 'Just now',
    });
    onClose();
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
        onClick={onClose}
      ></div>
      <div className="relative w-full max-w-lg bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
        <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
          <h3 className="font-bold text-white flex items-center gap-2">
            <Layers className="w-5 h-5 text-kodo-steel" /> New Project
          </h3>
          <button onClick={onClose}>
            <X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
          </button>
        </div>

        <div className="p-6 space-y-6">
          <Input
            label="Project Name"
            placeholder="e.g. Neon Genesis"
            value={formData.name}
            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
            autoFocus
          />

          <div>
            <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
              Primary Workstation (DAW)
            </label>
            <div className="grid grid-cols-3 gap-4">
              {['Ableton', 'FL Studio', 'Logic Pro'].map((daw) => (
                <button
                  key={daw}
                  onClick={() => setFormData({ ...formData, daw })}
                  className={`p-4 rounded-lg border text-sm font-bold transition-all ${formData.daw === daw ? 'bg-kodo-cyan/10 border-kodo-cyan text-white' : 'bg-kodo-void border-kodo-steel text-kodo-content-dim hover:border-kodo-steel'}`}
                >
                  {daw}
                </button>
              ))}
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <Input
              label="BPM"
              type="number"
              placeholder="128"
              value={formData.bpm}
              onChange={(e) =>
                setFormData({ ...formData, bpm: e.target.value })
              }
            />
            <Input
              label="Key"
              placeholder="C Minor"
              value={formData.key}
              onChange={(e) =>
                setFormData({ ...formData, key: e.target.value })
              }
            />
          </div>

          <div>
            <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
              Description
            </label>
            <textarea
              className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-steel outline-none text-sm resize-none h-24"
              placeholder="Project goals, vibe, or reference tracks..."
              value={formData.description}
              onChange={(e) =>
                setFormData({ ...formData, description: e.target.value })
              }
            />
          </div>
        </div>

        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
          <Button variant="ghost" onClick={onClose}>
            Cancel
          </Button>
          <Button
            variant="primary"
            onClick={handleSubmit}
            disabled={!formData.name}
          >
            Create Project
          </Button>
        </div>
      </div>
    </div>
  );
};