'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { ArrowLeft, ChevronRight, Loader2, Camera, Upload, X } from 'lucide-react';
import { useItemCreate } from '@/hooks/useItemCreate';
import ItemPhotoUpload from '@/components/ItemPhotoUpload';
import ManualCropUI from '@/components/ManualCropUI';
import { toast } from 'react-hot-toast';

interface Category {
  id: number;
  name: string;
}

interface ItemType {
  id: number;
  name: string;
}

export default function CreateItemPage() {
  const router = useRouter();
  const {
    step,
    formData,
    setFormData,
    uploadedPhoto,
    cropBounds,
    setCropBounds,
    isLoading,
    error,
    photoError,
    goToStep,
    nextStep,
    prevStep,
    uploadPhoto,
    submitItem,
    reset,
  } = useItemCreate();

  const [categories, setCategories] = useState<Category[]>([]);
  const [itemTypes, setItemTypes] = useState<ItemType[]>([]);
  const [currentUser, setCurrentUser] = useState<{ id: number; username: string } | null>(null);
  const [useFullPhoto, setUseFullPhoto] = useState(true);
  const [selectedFile, setSelectedFile] = useState<File | null>(null);

  // Load categories and current user on mount
  useEffect(() => {
    const loadInitialData = async () => {
      try {
        // Get categories from localStorage or API
        const savedCategories = localStorage.getItem('categories');
        const savedUser = localStorage.getItem('currentUser');

        if (savedCategories) {
          setCategories(JSON.parse(savedCategories));
        }
        if (savedUser) {
          setCurrentUser(JSON.parse(savedUser));
        }
      } catch (err) {
        // Silently handle initial data load failure - use default empty state
      }
    };

    loadInitialData();
  }, []);

  const handlePhotoUpload = async (file: File) => {
    setSelectedFile(file);
    try {
      await uploadPhoto(file);
      toast.success('Photo uploaded successfully');
      nextStep(); // Move to preview after upload
    } catch (err: any) {
      toast.error(err.message || 'Failed to upload photo');
    }
  };

  const handleDetailsSubmit = async () => {
    try {
      if (!currentUser) {
        toast.error('User not authenticated');
        return;
      }

      await submitItem(currentUser.id);
      nextStep(); // Move to photo upload after item creation
    } catch (err: any) {
      toast.error(err.message || 'Failed to create item');
    }
  };

  const handleConfirm = () => {
    toast.success('Item created successfully');
    reset();
    router.push('/inventory');
  };

  const stepIndicator = (stepName: string, stepNum: number) => {
    const stepOrder: Record<string, number> = {
      details: 1,
      photo: 2,
      preview: 3,
      confirm: 4,
    };
    const currentNum = stepOrder[step];
    const isActive = currentNum === stepNum;
    const isCompleted = currentNum > stepNum;

    return (
      <div
        className={`flex items-center gap-2 text-xs font-normal ${
          isActive ? 'text-primary' : isCompleted ? 'text-secondary' : 'text-secondary'
        }`}
      >
        <div
          className={`w-6 h-6 rounded-none flex items-center justify-center ${
            isActive
              ? 'bg-primary text-white'
              : isCompleted
                ? 'bg-secondary text-white'
                : 'bg-border'
          }`}
        >
          {stepNum}
        </div>
        {stepName}
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-surface text-white p-4">
      {/* Header */}
      <div className="max-w-2xl mx-auto mb-6">
        <button
          onClick={() => router.back()}
          className="flex items-center gap-2 text-sm text-secondary hover:text-white transition-colors mb-6"
        >
          <ArrowLeft size={16} />
          Back
        </button>

        <div className="flex items-center gap-4 mb-8">
          <div className="p-3 bg-primary/10 rounded-none border border-primary/20">
            <Upload size={24} className="text-primary" />
          </div>
          <div>
            <h1 className="text-2xl font-normal">Create New Item</h1>
            <p className="text-xs text-secondary mt-1">
              Step {step === 'details' ? 1 : step === 'photo' ? 2 : step === 'preview' ? 3 : 4} of 4
            </p>
          </div>
        </div>

        {/* Step Indicator */}
        <div className="flex justify-between gap-4 text-center mb-8">
          {stepIndicator('Details', 1)}
          {stepIndicator('Photo', 2)}
          {stepIndicator('Preview', 3)}
          {stepIndicator('Confirm', 4)}
        </div>
      </div>

      {/* Content Area */}
      <div className="max-w-2xl mx-auto">
        {/* Details Step */}
        {step === 'details' && (
          <div className="bg-surface-container rounded-none border border-border p-6">
            <h2 className="text-lg font-normal mb-6">Item Details</h2>

            <div className="space-y-4">
              {/* Name */}
              <div>
                <label className="block text-sm font-normal mb-2">Item Name</label>
                <input
                  type="text"
                  value={formData.name}
                  onChange={(e) => setFormData({ name: e.target.value })}
                  placeholder="Enter item name"
                  className="w-full px-3 py-2 bg-surface-bright border border-border rounded-none text-white placeholder-slate-500 focus:border-primary focus:outline-none"
                  disabled={isLoading}
                />
              </div>

              {/* Category */}
              <div>
                <label className="block text-sm font-normal mb-2">Category</label>
                <select
                  value={formData.category}
                  onChange={(e) => setFormData({ category: e.target.value })}
                  className="w-full px-3 py-2 bg-surface-bright border border-border rounded-none text-white focus:border-primary focus:outline-none"
                  disabled={isLoading}
                >
                  <option value="">Select a category</option>
                  {categories.map((cat) => (
                    <option key={cat.id} value={cat.name}>
                      {cat.name}
                    </option>
                  ))}
                </select>
              </div>

              {/* Item Type */}
              <div>
                <label className="block text-sm font-normal mb-2">Item Type</label>
                <input
                  type="text"
                  value={formData.item_type}
                  onChange={(e) => setFormData({ item_type: e.target.value })}
                  placeholder="e.g., Component, Part, Equipment"
                  className="w-full px-3 py-2 bg-surface-bright border border-border rounded-none text-white placeholder-slate-500 focus:border-primary focus:outline-none"
                  disabled={isLoading}
                />
              </div>

              {/* Quantity */}
              <div>
                <label className="block text-sm font-normal mb-2">Quantity</label>
                <input
                  type="number"
                  min="1"
                  value={formData.quantity}
                  onChange={(e) => setFormData({ quantity: parseInt(e.target.value) || 1 })}
                  className="w-full px-3 py-2 bg-surface-bright border border-border rounded-none text-white focus:border-primary focus:outline-none"
                  disabled={isLoading}
                />
              </div>

              {/* Part Number (Optional) */}
              <div>
                <label className="block text-sm font-normal mb-2">Part Number (Optional)</label>
                <input
                  type="text"
                  value={formData.part_number || ''}
                  onChange={(e) => setFormData({ part_number: e.target.value })}
                  placeholder="e.g., PN-12345"
                  className="w-full px-3 py-2 bg-surface-bright border border-border rounded-none text-white placeholder-slate-500 focus:border-primary focus:outline-none"
                  disabled={isLoading}
                />
              </div>

              {/* Barcode (Optional) */}
              <div>
                <label className="block text-sm font-normal mb-2">Barcode (Optional)</label>
                <input
                  type="text"
                  value={formData.barcode || ''}
                  onChange={(e) => setFormData({ barcode: e.target.value })}
                  placeholder="e.g., 1234567890"
                  className="w-full px-3 py-2 bg-surface-bright border border-border rounded-none text-white placeholder-slate-500 focus:border-primary focus:outline-none"
                  disabled={isLoading}
                />
              </div>

              {/* Error Message */}
              {error && (
                <div className="p-3 bg-error/10 border border-error/30 rounded-none text-error text-sm">
                  {error}
                </div>
              )}

              {/* Action Buttons */}
              <div className="flex gap-3 pt-4">
                <button
                  onClick={() => router.back()}
                  className="flex-1 px-4 py-2 border border-border text-[#CCCCCC] rounded-none hover:border-outline transition-colors font-normal"
                  disabled={isLoading}
                >
                  Discard Draft
                </button>
                <button
                  onClick={handleDetailsSubmit}
                  disabled={isLoading}
                  className="flex-1 px-4 py-2 bg-primary text-white rounded-none hover:bg-primary/90 transition-colors font-normal flex items-center justify-center gap-2"
                >
                  {isLoading ? <Loader2 size={16} className="animate-spin" /> : <ChevronRight size={16} />}
                  {isLoading ? 'Creating...' : 'Next: Upload Photo'}
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Photo Upload Step */}
        {step === 'photo' && (
          <div className="bg-surface-container rounded-none border border-border p-6">
            <h2 className="text-lg font-normal mb-4">Upload Item Photo</h2>
            <p className="text-sm text-secondary mb-6">
              Take a photo or upload an image. You can crop it manually on the next step.
            </p>

            <div className="mb-6">
              <ItemPhotoUpload
                itemId={0} // Placeholder - item already created
                onUploadSuccess={(photo) => {
                  setSelectedFile(null);
                }}
                onError={(error) => {
                  toast.error(error);
                }}
              />
            </div>

            {photoError && (
              <div className="p-3 bg-error/10 border border-error/30 rounded-none text-error text-sm mb-6">
                {photoError}
              </div>
            )}

            {/* Action Buttons */}
            <div className="flex gap-3">
              <button
                onClick={prevStep}
                className="flex-1 px-4 py-2 border border-border text-[#CCCCCC] rounded-none hover:border-outline transition-colors font-normal"
              >
                Back
              </button>
              <button
                onClick={nextStep}
                disabled={!uploadedPhoto}
                className="flex-1 px-4 py-2 bg-primary text-white rounded-none hover:bg-primary/90 disabled:bg-border disabled:text-secondary transition-colors font-normal flex items-center justify-center gap-2"
              >
                <ChevronRight size={16} />
                Next: Crop & Preview
              </button>
            </div>
          </div>
        )}

        {/* Preview Step (Crop) */}
        {step === 'preview' && uploadedPhoto && (
          <div className="bg-surface-container rounded-none border border-border p-6">
            <h2 className="text-lg font-normal mb-4">Crop & Preview</h2>
            <p className="text-sm text-secondary mb-6">
              Adjust the crop area or use the full photo. Manual crop handles are visible.
            </p>

            <div className="mb-6 bg-surface-bright rounded-none p-4">
              <ManualCropUI
                imageUrl={uploadedPhoto.full_url}
                onCropChange={setCropBounds}
                initialCrop={cropBounds || undefined}
              />
            </div>

            {/* Use Full Photo Toggle */}
            <div className="flex items-center gap-3 mb-6 p-3 bg-surface-bright rounded-none">
              <input
                type="checkbox"
                id="use-full-photo"
                checked={useFullPhoto}
                onChange={(e) => {
                  setUseFullPhoto(e.target.checked);
                  if (e.target.checked) {
                    setCropBounds(null);
                  }
                }}
                className="toggle-pill"
              />
              <label htmlFor="use-full-photo" className="text-sm font-normal text-[#CCCCCC]">
                Use full photo (skip cropping)
              </label>
            </div>

            {/* Action Buttons */}
            <div className="flex gap-3">
              <button
                onClick={prevStep}
                className="flex-1 px-4 py-2 border border-border text-[#CCCCCC] rounded-none hover:border-outline transition-colors font-normal"
              >
                Back
              </button>
              <button
                onClick={nextStep}
                className="flex-1 px-4 py-2 bg-primary text-white rounded-none hover:bg-primary/90 transition-colors font-normal flex items-center justify-center gap-2"
              >
                <ChevronRight size={16} />
                Next: Confirm
              </button>
            </div>
          </div>
        )}

        {/* Confirm Step */}
        {step === 'confirm' && (
          <div className="bg-surface-container rounded-none border border-border p-6">
            <h2 className="text-lg font-normal mb-6">Confirm & Save</h2>

            {/* Item Summary */}
            <div className="bg-surface-bright rounded-none p-4 mb-6 space-y-2">
              <div className="flex justify-between text-sm">
                <span className="text-secondary">Name:</span>
                <span className="font-normal">{formData.name}</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-secondary">Category:</span>
                <span className="font-normal">{formData.category}</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-secondary">Type:</span>
                <span className="font-normal">{formData.item_type}</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-secondary">Quantity:</span>
                <span className="font-normal">{formData.quantity}</span>
              </div>
              {uploadedPhoto && (
                <div className="flex justify-between text-sm">
                  <span className="text-secondary">Photo:</span>
                  <span className="font-normal text-tertiary">Uploaded</span>
                </div>
              )}
            </div>

            {/* Photo Thumbnail */}
            {uploadedPhoto && (
              <div className="mb-6">
                <p className="text-sm text-secondary mb-2">Photo Preview</p>
                <img
                  src={uploadedPhoto.thumbnail_url}
                  alt="Item"
                  className="w-full h-48 object-cover rounded-none"
                />
              </div>
            )}

            {/* Action Buttons */}
            <div className="flex gap-3">
              <button
                onClick={prevStep}
                className="flex-1 px-4 py-2 border border-border text-[#CCCCCC] rounded-none hover:border-outline transition-colors font-normal"
              >
                Back
              </button>
              <button
                onClick={handleConfirm}
                className="flex-1 px-4 py-2 bg-tertiary text-white rounded-none hover:hover:opacity-80 transition-colors font-normal flex items-center justify-center gap-2"
              >
                Save & Close
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}