import React, { useState } from 'react';
import { Card } from '../ui/card';
import { Button } from '../ui/button';
import { Input } from '../ui/input';
import { useToast } from '../../context/ToastContext';
import {
  Save,
  UploadCloud,
  Image as ImageIcon,
  Music,
  Tag,
  DollarSign,
} from 'lucide-react';

interface LicenseConfig {
  type: 'personal' | 'commercial' | 'exclusive';
  enabled: boolean;
  price: string;
}

export const CreateProductView: React.FC = () => {
  const { addToast } = useToast();
  const [_step, _setStep] = useState(1);

  // Form State
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [category, setCategory] = useState('Sample Pack');
  const [tags, setTags] = useState('');
  const [bpm, setBpm] = useState('');
  const [key, setKey] = useState('');

  const [licenses, setLicenses] = useState<LicenseConfig[]>([
    { type: 'personal', enabled: true, price: '29.99' },
    { type: 'commercial', enabled: false, price: '49.99' },
    { type: 'exclusive', enabled: false, price: '199.99' },
  ]);

  const updateLicense = (
    type: string,
    field: keyof LicenseConfig,
    value: any,
  ) => {
    setLicenses((prev) =>
      prev.map((l) => (l.type === type ? { ...l, [field]: value } : l)),
    );
  };

  const handlePublish = () => {
    if (!title || !description) {
      addToast('Please fill in required fields', 'error');
      return;
    }
    addToast('Product published successfully!', 'success');
    // Redirect logic would go here
  };

  return (
    <div className="animate-fadeIn max-w-4xl mx-auto pb-20">
      <div className="flex justify-between items-center mb-8">
        <div>
          <h2 className="text-3xl font-display font-bold text-white mb-2">
            CREATE PRODUCT
          </h2>
          <p className="text-gray-400 font-mono text-sm">
            Upload and monetize your sound assets.
          </p>
        </div>
        <div className="flex gap-3">
          <Button variant="ghost" onClick={() => addToast('Draft saved')}>
            <Save className="w-4 h-4 mr-2" /> Save Draft
          </Button>
          <Button variant="primary" onClick={handlePublish}>
            Publish Product
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Left: Media Uploads */}
        <div className="space-y-6">
          <Card variant="default">
            <h3 className="font-bold text-white mb-4 flex items-center gap-2 text-sm uppercase tracking-wider">
              <ImageIcon className="w-4 h-4 text-kodo-cyan" /> Cover Art
            </h3>
            <div className="aspect-square bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-xl flex flex-col items-center justify-center text-gray-500 hover:text-white hover:border-kodo-cyan cursor-pointer transition-colors group">
              <UploadCloud className="w-8 h-8 mb-2 group-hover:scale-110 transition-transform" />
              <span className="text-xs font-bold uppercase">Upload Image</span>
            </div>
            <p className="text-xs text-gray-500 mt-2 text-center">
              3000x3000px JPG/PNG
            </p>
          </Card>

          <Card variant="default">
            <h3 className="font-bold text-white mb-4 flex items-center gap-2 text-sm uppercase tracking-wider">
              <Music className="w-4 h-4 text-kodo-magenta" /> Product Files
            </h3>
            <div className="space-y-4">
              <div>
                <label className="text-xs text-gray-400 mb-1 block">
                  Main File (ZIP/RAR)
                </label>
                <div className="h-20 bg-kodo-ink border border-kodo-steel rounded-lg flex items-center justify-center cursor-pointer hover:border-gray-500">
                  <span className="text-xs text-gray-500">
                    Drop full product here
                  </span>
                </div>
              </div>
              <div>
                <label className="text-xs text-gray-400 mb-1 block">
                  Audio Preview (MP3)
                </label>
                <div className="h-12 bg-kodo-ink border border-kodo-steel rounded-lg flex items-center justify-center cursor-pointer hover:border-gray-500">
                  <span className="text-xs text-gray-500">
                    Drop preview audio
                  </span>
                </div>
              </div>
            </div>
          </Card>
        </div>

        {/* Center/Right: Details & Pricing */}
        <div className="lg:col-span-2 space-y-6">
          <Card variant="default">
            <h3 className="font-bold text-white mb-6 border-b border-kodo-steel pb-2">
              Product Details
            </h3>
            <div className="space-y-4">
              <Input
                label="Product Title"
                placeholder="e.g. Neon Nights Vol. 1"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
              />

              <div>
                <label className="block text-sm font-medium text-gray-400 mb-2">
                  Description
                </label>
                <textarea
                  className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-cyan outline-none min-h-[120px]"
                  placeholder="Describe your sound pack..."
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-400 mb-2">
                    Category
                  </label>
                  <select
                    className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-cyan outline-none"
                    value={category}
                    onChange={(e) => setCategory(e.target.value)}
                  >
                    <option>Sample Pack</option>
                    <option>Presets</option>
                    <option>DAW Template</option>
                    <option>MIDI Pack</option>
                  </select>
                </div>
                <Input
                  label="Tags (comma separated)"
                  placeholder="Techno, Drums, Dark"
                  value={tags}
                  onChange={(e) => setTags(e.target.value)}
                  icon={<Tag className="w-4 h-4" />}
                />
              </div>

              <div className="grid grid-cols-3 gap-4">
                <Input
                  label="BPM"
                  placeholder="128"
                  value={bpm}
                  onChange={(e) => setBpm(e.target.value)}
                />
                <Input
                  label="Key"
                  placeholder="Fmin"
                  value={key}
                  onChange={(e) => setKey(e.target.value)}
                />
                <div>
                  <label className="block text-sm font-medium text-gray-400 mb-2">
                    Format
                  </label>
                  <div className="p-3 bg-kodo-ink border border-kodo-steel rounded-lg text-gray-400 text-sm">
                    WAV 24-bit
                  </div>
                </div>
              </div>
            </div>
          </Card>

          <Card variant="default">
            <h3 className="font-bold text-white mb-6 border-b border-kodo-steel pb-2 flex items-center gap-2">
              <DollarSign className="w-5 h-5 text-kodo-gold" /> Pricing &
              Licenses
            </h3>
            <div className="space-y-4">
              {licenses.map((lic) => (
                <div
                  key={lic.type}
                  className={`p-4 rounded-xl border transition-all ${lic.enabled ? 'bg-kodo-ink border-kodo-cyan/30' : 'bg-kodo-ink/30 border-kodo-steel opacity-60'}`}
                >
                  <div className="flex items-center justify-between mb-4">
                    <div className="flex items-center gap-3">
                      <div
                        onClick={() =>
                          updateLicense(lic.type, 'enabled', !lic.enabled)
                        }
                        className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${lic.enabled ? 'bg-kodo-cyan' : 'bg-gray-600'}`}
                      >
                        <div
                          className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${lic.enabled ? 'left-6' : 'left-1'}`}
                        ></div>
                      </div>
                      <div>
                        <div className="font-bold text-white capitalize">
                          {lic.type} License
                        </div>
                        <div className="text-xs text-gray-400">
                          {lic.type === 'personal' &&
                            'Royalty-free for non-commercial use.'}
                          {lic.type === 'commercial' &&
                            'Royalty-free for commercial releases.'}
                          {lic.type === 'exclusive' &&
                            'Full rights transfer. Product removed after sale.'}
                        </div>
                      </div>
                    </div>
                    <div className="w-32">
                      <div className="relative">
                        <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">
                          $
                        </span>
                        <input
                          type="number"
                          className="w-full bg-kodo-void border border-kodo-steel rounded-lg py-2 pl-6 pr-2 text-white focus:border-kodo-cyan outline-none text-right font-mono"
                          value={lic.price}
                          onChange={(e) =>
                            updateLicense(lic.type, 'price', e.target.value)
                          }
                          disabled={!lic.enabled}
                        />
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
};
