'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import SidebarLayout from '../../../components/sidebar-layout';
import { ArrowLeft, Save, CircleDot } from 'lucide-react';

export default function NewLensPage() {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);

  const [formData, setFormData] = useState({
    sku: '',
    type: 'single',
    material: 'cr39',
    index: 1.5,
    coating: [] as string[],
    brand: '',
    powerRange: {
      sphereMin: -12,
      sphereMax: 8,
      cylinderMin: -6,
      cylinderMax: 0
    },
    costPrice: 0,
    sellingPrice: 0,
    quantity: 0,
    reorderLevel: 10
  });

  const toggleCoating = (coating: string) => {
    setFormData(prev => ({
      ...prev,
      coating: prev.coating.includes(coating)
        ? prev.coating.filter(c => c !== coating)
        : [...prev.coating, coating]
    }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    
    try {
      const response = await fetch('/api/optical-shop/lenses', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });

      if (response.ok) {
        router.push('/optical-shop/lenses');
      } else {
        alert('Failed to add lens');
      }
    } catch (error) {
      console.error('Error adding lens:', error);
      alert('Failed to add lens');
    } finally {
      setIsSubmitting(false);
    }
  };

  const coatingOptions = [
    'anti_reflective', 'blue_light', 'photochromic', 'scratch_resistant', 
    'hydrophobic', 'oleophobic', 'uv_protection'
  ];

  return (
    <SidebarLayout title="Add Lens" description="Add new lens to inventory">
      <div className="max-w-3xl mx-auto">
        <div className="mb-6">
          <Link href="/optical-shop/lenses" className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900">
            <ArrowLeft className="h-4 w-4" />
            Back to Lenses
          </Link>
        </div>

        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <CircleDot className="h-5 w-5 text-green-600" />
              Lens Details
            </h2>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm text-gray-600 mb-1">SKU *</label>
                <input
                  type="text"
                  required
                  value={formData.sku}
                  onChange={(e) => setFormData(prev => ({ ...prev, sku: e.target.value }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500"
                  placeholder="e.g., LN-001"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">Brand *</label>
                <input
                  type="text"
                  required
                  value={formData.brand}
                  onChange={(e) => setFormData(prev => ({ ...prev, brand: e.target.value }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500"
                  placeholder="e.g., Essilor"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">Type</label>
                <select
                  value={formData.type}
                  onChange={(e) => setFormData(prev => ({ ...prev, type: e.target.value }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500"
                >
                  <option value="single">Single Vision</option>
                  <option value="bifocal">Bifocal</option>
                  <option value="progressive">Progressive</option>
                  <option value="occupational">Occupational</option>
                </select>
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">Material</label>
                <select
                  value={formData.material}
                  onChange={(e) => setFormData(prev => ({ ...prev, material: e.target.value }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500"
                >
                  <option value="cr39">CR-39</option>
                  <option value="polycarbonate">Polycarbonate</option>
                  <option value="trivex">Trivex</option>
                  <option value="hiIndex157">Hi-Index 1.57</option>
                  <option value="hiIndex160">Hi-Index 1.60</option>
                  <option value="hiIndex167">Hi-Index 1.67</option>
                  <option value="hiIndex174">Hi-Index 1.74</option>
                  <option value="glass">Glass</option>
                </select>
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">Refractive Index</label>
                <input
                  type="number"
                  step="0.01"
                  value={formData.index}
                  onChange={(e) => setFormData(prev => ({ ...prev, index: parseFloat(e.target.value) || 0 }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500"
                />
              </div>
            </div>
          </div>

          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">Coatings</h2>
            <div className="flex flex-wrap gap-2">
              {coatingOptions.map(coating => (
                <button
                  key={coating}
                  type="button"
                  onClick={() => toggleCoating(coating)}
                  className={`px-3 py-1.5 rounded-full text-sm border transition-all ${
                    formData.coating.includes(coating)
                      ? 'bg-green-100 border-green-500 text-green-700'
                      : 'bg-gray-50 border-gray-200 text-gray-600 hover:border-gray-300'
                  }`}
                >
                  {coating.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
                </button>
              ))}
            </div>
          </div>

          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">Power Range</h2>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div>
                <label className="block text-sm text-gray-600 mb-1">Sphere Min</label>
                <input
                  type="number"
                  step="0.25"
                  value={formData.powerRange.sphereMin}
                  onChange={(e) => setFormData(prev => ({ 
                    ...prev, 
                    powerRange: { ...prev.powerRange, sphereMin: parseFloat(e.target.value) || 0 } 
                  }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">Sphere Max</label>
                <input
                  type="number"
                  step="0.25"
                  value={formData.powerRange.sphereMax}
                  onChange={(e) => setFormData(prev => ({ 
                    ...prev, 
                    powerRange: { ...prev.powerRange, sphereMax: parseFloat(e.target.value) || 0 } 
                  }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">Cylinder Min</label>
                <input
                  type="number"
                  step="0.25"
                  value={formData.powerRange.cylinderMin}
                  onChange={(e) => setFormData(prev => ({ 
                    ...prev, 
                    powerRange: { ...prev.powerRange, cylinderMin: parseFloat(e.target.value) || 0 } 
                  }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">Cylinder Max</label>
                <input
                  type="number"
                  step="0.25"
                  value={formData.powerRange.cylinderMax}
                  onChange={(e) => setFormData(prev => ({ 
                    ...prev, 
                    powerRange: { ...prev.powerRange, cylinderMax: parseFloat(e.target.value) || 0 } 
                  }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500"
                />
              </div>
            </div>
          </div>

          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">Pricing & Stock</h2>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div>
                <label className="block text-sm text-gray-600 mb-1">Cost Price ($)</label>
                <input
                  type="number"
                  step="0.01"
                  value={formData.costPrice}
                  onChange={(e) => setFormData(prev => ({ ...prev, costPrice: parseFloat(e.target.value) || 0 }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">Selling Price ($)</label>
                <input
                  type="number"
                  step="0.01"
                  value={formData.sellingPrice}
                  onChange={(e) => setFormData(prev => ({ ...prev, sellingPrice: parseFloat(e.target.value) || 0 }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">Quantity</label>
                <input
                  type="number"
                  value={formData.quantity}
                  onChange={(e) => setFormData(prev => ({ ...prev, quantity: parseInt(e.target.value) || 0 }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">Reorder Level</label>
                <input
                  type="number"
                  value={formData.reorderLevel}
                  onChange={(e) => setFormData(prev => ({ ...prev, reorderLevel: parseInt(e.target.value) || 0 }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500"
                />
              </div>
            </div>
          </div>

          <div className="flex justify-end gap-4">
            <Link href="/optical-shop/lenses" className="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
              Cancel
            </Link>
            <button
              type="submit"
              disabled={isSubmitting}
              className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 flex items-center gap-2"
            >
              <Save className="h-4 w-4" />
              {isSubmitting ? 'Saving...' : 'Add Lens'}
            </button>
          </div>
        </form>
      </div>
    </SidebarLayout>
  );
}