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-cyan" /> New Project
          </h3>
          <button onClick={onClose}><X className="w-5 h-5 text-gray-400 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-gray-400 uppercase mb-2">Primary Workstation (DAW)</label>
                <div className="grid grid-cols-3 gap-3">
                    {['Ableton', 'FL Studio', 'Logic Pro'].map(daw => (
                        <button
                            key={daw}
                            onClick={() => setFormData({...formData, daw})}
                            className={`p-3 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-gray-500 hover:border-gray-400'}`}
                        >
                            {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-gray-400 uppercase mb-2">Description</label>
                <textarea 
                    className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-cyan 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-3">
            <Button variant="ghost" onClick={onClose}>Cancel</Button>
            <Button variant="primary" onClick={handleSubmit} disabled={!formData.name}>Create Project</Button>
        </div>
      </div>
    </div>
  );
};