import React, { useState } from 'react';
import { Card } from '../ui/card';
import { Button } from '../ui/button';
import { Input, FileUpload } from '../ui/input';
import { Save, Camera, FileText } from 'lucide-react';
import { useToast } from '../../context/ToastContext';

export const AddEquipmentView: React.FC = () => {
  const { addToast } = useToast();

  const [formData, setFormData] = useState({
    category: 'Synth',
    brand: '',
    model: '',
    serial: '',
    purchaseDate: '',
    price: '',
    status: 'Active',
    location: 'Main Studio',
    warrantyEnd: '',
    notes: '',
  });

  const handleChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  const handleSave = () => {
    if (!formData.brand || !formData.model) {
      addToast('Please fill in basic information', 'error');
      return;
    }
    addToast('Equipment added to inventory', '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">
        <h2 className="text-2xl font-display font-bold text-white">
          REGISTER EQUIPMENT
        </h2>
        <Button
          variant="primary"
          icon={<Save className="w-4 h-4" />}
          onClick={handleSave}
        >
          Save Item
        </Button>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Left: Media */}
        <div className="space-y-6">
          <Card variant="default">
            <h3 className="font-bold text-white mb-4 text-sm uppercase tracking-wider flex items-center gap-2">
              <Camera className="w-4 h-4 text-kodo-cyan" /> Photos
            </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-kodo-content-dim hover:text-white hover:border-kodo-steel/50 cursor-pointer transition-colors group mb-4">
              <Camera className="w-8 h-8 mb-2 group-hover:scale-110 transition-transform" />
              <span className="text-xs font-bold uppercase">Upload Photos</span>
            </div>
            <div className="grid grid-cols-3 gap-2">
              {[1, 2, 3].map((i) => (
                <div
                  key={i}
                  className="aspect-square bg-kodo-ink rounded border border-kodo-steel/50"
                ></div>
              ))}
            </div>
          </Card>

          <Card variant="default">
            <h3 className="font-bold text-white mb-4 text-sm uppercase tracking-wider flex items-center gap-2">
              <FileText className="w-4 h-4 text-kodo-content-dim" /> Documents
            </h3>
            <FileUpload />
            <p className="text-xs text-kodo-content-dim mt-2 text-center">
              Receipts, Manuals, Warranty Cards
            </p>
          </Card>
        </div>

        {/* Right: Form */}
        <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">
              Basic Information
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
              <div>
                <label className="block text-sm font-medium text-kodo-content-dim 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={formData.category}
                  onChange={(e) => handleChange('category', e.target.value)}
                >
                  <option>Synth</option>
                  <option>Interface</option>
                  <option>Microphone</option>
                  <option>Computer</option>
                  <option>Effect Pedal</option>
                  <option>Monitor</option>
                </select>
              </div>
              <Input
                label="Status"
                placeholder="Active"
                value={formData.status}
                onChange={(e) => handleChange('status', e.target.value)}
              />
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
              <Input
                label="Brand"
                placeholder="e.g. Roland"
                value={formData.brand}
                onChange={(e) => handleChange('brand', e.target.value)}
              />
              <Input
                label="Model"
                placeholder="e.g. TR-8S"
                value={formData.model}
                onChange={(e) => handleChange('model', e.target.value)}
              />
            </div>
            <Input
              label="Serial Number"
              placeholder="S/N..."
              value={formData.serial}
              onChange={(e) => handleChange('serial', e.target.value)}
            />
          </Card>

          <Card variant="default">
            <h3 className="font-bold text-white mb-6 border-b border-kodo-steel pb-2">
              Purchase & Warranty
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
              <Input
                label="Purchase Date"
                type="date"
                value={formData.purchaseDate}
                onChange={(e) => handleChange('purchaseDate', e.target.value)}
              />
              <Input
                label="Price Paid"
                placeholder="0.00"
                value={formData.price}
                onChange={(e) => handleChange('price', e.target.value)}
              />
              <Input
                label="Warranty Ends"
                type="date"
                value={formData.warrantyEnd}
                onChange={(e) => handleChange('warrantyEnd', e.target.value)}
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-kodo-content-dim mb-2">
                Location / Tags
              </label>
              <Input
                placeholder="Main Studio, Rack A..."
                value={formData.location}
                onChange={(e) => handleChange('location', e.target.value)}
              />
            </div>
          </Card>

          <Card variant="default">
            <h3 className="font-bold text-white mb-4 border-b border-kodo-steel pb-2">
              Notes
            </h3>
            <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-[100px]"
              placeholder="Condition notes, modifications, etc..."
              value={formData.notes}
              onChange={(e) => handleChange('notes', e.target.value)}
            />
          </Card>
        </div>
      </div>
    </div>
  );
};