import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Upload, X, Camera, DollarSign, MapPin } from 'lucide-react';
import { Input } from '../components/ui/Input';
import { GradientButton } from '../components/ui/GradientButton';
import { Card } from '../components/ui/Card';
import { Modal } from '../components/ui/Modal';
import { CATEGORIES, CONDITIONS, LISTING_FEE } from '../utils/constants';
import { formatCurrency } from '../utils/format';

export function SellItemPage() {
  const navigate = useNavigate();
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [price, setPrice] = useState('');
  const [category, setCategory] = useState('');
  const [condition, setCondition] = useState('');
  const [location, setLocation] = useState('');
  const [obo, setObo] = useState(false);
  const [photos, setPhotos] = useState<string[]>([]);
  const [showPayment, setShowPayment] = useState(false);

  const handleAddPhoto = () => {
    if (photos.length < 6) {
      setPhotos([...photos, `photo-${photos.length + 1}`]);
    }
  };

  const handleRemovePhoto = (index: number) => {
    setPhotos(photos.filter((_, i) => i !== index));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setShowPayment(true);
  };

  const handlePayment = () => {
    setShowPayment(false);
    navigate('/');
  };

  return (
    <div className="max-w-3xl mx-auto px-4 sm:px-6 py-8">
      <Card padding="lg">
        <h1 className="text-2xl font-bold text-gray-900 mb-2">Sell Your Item</h1>
        <p className="text-sm text-gray-500 mb-8">Help buyers find your item with a good description</p>

        <form onSubmit={handleSubmit} className="space-y-8">
          {/* Photos */}
          <div>
            <h2 className="text-sm font-semibold text-gray-900 mb-3">Photos</h2>
            <p className="text-xs text-gray-500 mb-3">Add up to 6 photos. First photo will be shown in search results.</p>
            <div className="grid grid-cols-3 sm:grid-cols-6 gap-3">
              {photos.map((_, i) => (
                <div key={i} className="relative aspect-square bg-gradient-to-br from-primary-50 to-pink-50 rounded-xl flex items-center justify-center">
                  <Camera className="w-6 h-6 text-primary-300" />
                  <button type="button" onClick={() => handleRemovePhoto(i)}
                    className="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center cursor-pointer">
                    <X className="w-3 h-3" />
                  </button>
                </div>
              ))}
              {photos.length < 6 && (
                <button type="button" onClick={handleAddPhoto}
                  className="aspect-square border-2 border-dashed border-gray-200 rounded-xl flex flex-col items-center justify-center gap-1 hover:border-primary-300 hover:bg-primary-50 transition-colors cursor-pointer">
                  <Upload className="w-5 h-5 text-gray-400" />
                  <span className="text-xs text-gray-400">Add</span>
                </button>
              )}
            </div>
          </div>

          {/* Details */}
          <div className="space-y-4">
            <h2 className="text-sm font-semibold text-gray-900">Details</h2>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1.5">Category</label>
              <select value={category} onChange={(e) => setCategory(e.target.value)} required
                className="w-full rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm text-gray-900 focus:border-primary-400 focus:ring-2 focus:ring-primary-100 focus:outline-none">
                <option value="">Select a category</option>
                {CATEGORIES.map(c => <option key={c.value} value={c.value}>{c.label}</option>)}
              </select>
            </div>
            <Input label="Title" placeholder="What are you selling?" value={title} onChange={(e) => setTitle(e.target.value)} required />
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1.5">Condition</label>
              <select value={condition} onChange={(e) => setCondition(e.target.value)} required
                className="w-full rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm text-gray-900 focus:border-primary-400 focus:ring-2 focus:ring-primary-100 focus:outline-none">
                <option value="">Select condition</option>
                {CONDITIONS.map(c => <option key={c.value} value={c.value}>{c.label}</option>)}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1.5">Description</label>
              <textarea value={description} onChange={(e) => setDescription(e.target.value)} rows={4} required
                placeholder="Describe your item in detail..."
                className="w-full rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:border-primary-400 focus:ring-2 focus:ring-primary-100 focus:outline-none resize-none" />
            </div>
          </div>

          {/* Price */}
          <div className="space-y-4">
            <h2 className="text-sm font-semibold text-gray-900">Price</h2>
            <Input label="Price" type="number" placeholder="0.00" value={price} onChange={(e) => setPrice(e.target.value)} required
              icon={<DollarSign className="w-4 h-4" />} />
            <label className="flex items-center gap-2 text-sm text-gray-700">
              <input type="checkbox" checked={obo} onChange={(e) => setObo(e.target.checked)} className="accent-primary-600" />
              Or Best Offer (OBO)
            </label>
          </div>

          {/* Location */}
          <div>
            <h2 className="text-sm font-semibold text-gray-900 mb-3">Location</h2>
            <Input placeholder="E.g. city, state, zip code" value={location} onChange={(e) => setLocation(e.target.value)} required
              icon={<MapPin className="w-4 h-4" />} />
          </div>

          <GradientButton type="submit" className="w-full" size="lg">
            Submit Listing
          </GradientButton>
          <p className="text-xs text-gray-400 text-center">
            A one-time fee of {formatCurrency(LISTING_FEE)} will be charged to list your item.
          </p>
        </form>
      </Card>

      {/* Payment Modal */}
      <Modal isOpen={showPayment} onClose={() => setShowPayment(false)} title="Payment" size="sm">
        <div className="text-center mb-6">
          <p className="text-sm text-gray-500">Small one-time fee to list your item on the marketplace</p>
          <p className="text-3xl font-bold text-primary-600 mt-3">{formatCurrency(LISTING_FEE)} <span className="text-sm font-normal text-gray-400">USD</span></p>
        </div>
        <div className="space-y-4 mb-6">
          <Input placeholder="4242 4242 4242 4242" label="Card Number" />
          <div className="grid grid-cols-2 gap-3">
            <Input placeholder="MM / YY" label="Expiry" />
            <Input placeholder="CVC" label="CVC" />
          </div>
        </div>
        <GradientButton className="w-full" size="lg" onClick={handlePayment}>
          Pay {formatCurrency(LISTING_FEE)}
        </GradientButton>
        <p className="text-xs text-gray-400 text-center mt-4">Secure payment powered by Stripe</p>
      </Modal>
    </div>
  );
}
