'use client';

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

export default function EditLensPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params);
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');

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

  useEffect(() => {
    fetchLens();
  }, [id]);

  const fetchLens = async () => {
    try {
      const response = await fetch(`/api/optical-shop/lenses/${id}`);
      if (response.ok) {
        const data = await response.json();
        setFormData({
          sku: data.sku || '',
          brand: data.brand || '',
          type: data.type || 'single',
          material: data.material || 'cr39',
          index: data.index || 1.5,
          coating: data.coating || [],
          powerRange: data.powerRange || { sphereMin: -12, sphereMax: 8, cylinderMin: -6, cylinderMax: 0 },
          diameter: data.diameter || 65,
          costPrice: data.costPrice || 0,
          sellingPrice: data.sellingPrice || 0,
          quantity: data.quantity || 0,
          reorderLevel: data.reorderLevel || 10,
          supplier: data.supplier || '',
          active: data.active !== false
        });
      } else {
        setError('Lens not found');
      }
    } catch (err) {
      console.error('Error fetching lens:', err);
      setError('Failed to load lens');
    } finally {
      setLoading(false);
    }
  };

  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();
    setSaving(true);

    try {
      const response = await fetch(`/api/optical-shop/lenses/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });

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

  const handleDelete = async () => {
    if (!confirm('Are you sure you want to delete this lens?')) return;

    try {
      const response = await fetch(`/api/optical-shop/lenses/${id}`, { method: 'DELETE' });
      if (response.ok) {
        router.push('/optical-shop/lenses');
      } else {
        alert('Failed to delete lens');
      }
    } catch (err) {
      console.error('Error deleting lens:', err);
      alert('Failed to delete lens');
    }
  };

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

  if (loading) {
    return (
      <SidebarLayout title="Edit Lens" description="Loading...">
        <div className="flex items-center justify-center h-64">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-600"></div>
        </div>
      </SidebarLayout>
    );
  }

  if (error) {
    return (
      <SidebarLayout title="Edit Lens" description="Error">
        <div className="max-w-3xl mx-auto">
          <Link href="/optical-shop/lenses" className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-6">
            <ArrowLeft className="h-4 w-4" />
            Back to Lenses
          </Link>
          <div className="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
            <p className="text-red-800">{error}</p>
          </div>
        </div>
      </SidebarLayout>
    );
  }

  return (
    <SidebarLayout title="Edit Lens" description={`${formData.brand} - ${formData.type}`}>
      <div className="max-w-3xl mx-auto">
        <div className="mb-6 flex items-center justify-between">
          <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>
          <button
            onClick={handleDelete}
            className="inline-flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
          >
            <Trash2 className="h-4 w-4" />
            Delete
          </button>
        </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"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">Brand</label>
                <input
                  type="text"
                  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"
                />
              </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>
                <label className="block text-sm text-gray-600 mb-1">Diameter (mm)</label>
                <input
                  type="number"
                  value={formData.diameter}
                  onChange={(e) => setFormData(prev => ({ ...prev, diameter: 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="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="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <div className="flex items-center gap-3">
              <input
                type="checkbox"
                id="active"
                checked={formData.active}
                onChange={(e) => setFormData(prev => ({ ...prev, active: e.target.checked }))}
                className="w-4 h-4 text-green-600 rounded focus:ring-green-500"
              />
              <label htmlFor="active" className="text-sm text-gray-700">Active (available for orders)</label>
            </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={saving}
              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" />
              {saving ? 'Saving...' : 'Save Changes'}
            </button>
          </div>
        </form>
      </div>
    </SidebarLayout>
  );
}