"use client";

import React, { useState } from 'react';
import { Upload, Bold, Italic, ShoppingCart, Save, RefreshCcw, Share2, Check, Minus, Plus, Ruler } from 'lucide-react';

interface ControlPanelProps {
  baseProducts: any[];
  selectedProduct: any;
  setSelectedProduct: (product: any) => void;
  colors: any[];
  productColor: any;
  setProductColor: (color: any) => void;
  size: string;
  setSize: (size: string) => void;
  handleImageUpload: (e: React.ChangeEvent<HTMLInputElement>) => void;
  customText: string;
  setCustomText: (text: string) => void;
  fontOptions: string[];
  fontFamily: string;
  setFontFamily: (font: string) => void;
  isBold: boolean;
  setIsBold: (val: boolean) => void;
  isItalic: boolean;
  setIsItalic: (val: boolean) => void;
  textColors: any[];
  textColor: string;
  setTextColor: (color: string) => void;
  quantity: number;
  setQuantity: (qty: number) => void;
  handleAddToCart: (unitPrice: number) => void;
  isAdding: boolean;
  handleSaveDesign: () => void;
  isSaving: boolean;
}

export default function ControlPanel({
  baseProducts, selectedProduct, setSelectedProduct,
  colors, productColor, setProductColor, size, setSize, handleImageUpload,
  customText, setCustomText, fontOptions, fontFamily, setFontFamily,
  isBold, setIsBold, isItalic, setIsItalic, textColors, textColor, setTextColor,
  quantity, setQuantity, handleAddToCart, isAdding, handleSaveDesign, isSaving
}: ControlPanelProps) {
  
  const [isCopied, setIsCopied] = useState(false);
  const sizeOptions = ['S', 'M', 'L', 'XL', '2XL'];

  // Dynamic Tiered Pricing Logic
  const getDiscount = (qty: number) => {
    if (qty >= 50) return { percent: 25, multiplier: 0.75 };
    if (qty >= 10) return { percent: 15, multiplier: 0.85 };
    return { percent: 0, multiplier: 1 };
  };

  const discount = getDiscount(quantity);
  const unitPrice = selectedProduct.price * discount.multiplier;
  const totalPrice = unitPrice * quantity;

  // Share Design URL Generator
  const handleShare = async () => {
    try {
      const url = new URL(window.location.href);
      url.searchParams.set('product', selectedProduct.id);
      url.searchParams.set('color', productColor.name); 
      if (customText) {
        url.searchParams.set('text', customText);
        url.searchParams.set('textColor', textColor);
        url.searchParams.set('font', fontFamily);
      }
      
      await navigator.clipboard.writeText(url.toString());
      setIsCopied(true);
      setTimeout(() => setIsCopied(false), 2000);
    } catch (err) {
      console.error("Failed to copy link", err);
    }
  };

  return (
    <div className="w-full lg:w-[400px] flex flex-col gap-5 overflow-y-auto max-h-[calc(100vh-100px)] pb-8 pr-2">
      
      {/* 1. Choose Product */}
      <div className="bg-white p-5 rounded-2xl border border-neutral-200 shadow-sm">
        <h3 className="font-bold text-neutral-900 mb-3 text-sm uppercase tracking-wider">1. Choose Product</h3>
        <div className="grid grid-cols-2 gap-3">
          {baseProducts.map((prod) => (
            <button
              key={prod.id}
              onClick={() => setSelectedProduct(prod)}
              className={`flex items-center gap-2 p-3 rounded-xl border text-left transition-all ${selectedProduct.id === prod.id ? 'border-yellow-500 bg-yellow-50 text-neutral-900 font-bold' : 'border-neutral-200 hover:border-neutral-300 text-neutral-600'}`}
            >
              <prod.icon className="w-5 h-5 flex-shrink-0" />
              <span className="text-sm">{prod.name}</span>
            </button>
          ))}
        </div>
      </div>

      {/* 2. Style & Size */}
      <div className="bg-white p-5 rounded-2xl border border-neutral-200 shadow-sm">
        <h3 className="font-bold text-neutral-900 mb-3 text-sm uppercase tracking-wider">2. Select Style</h3>
        
        <p className="text-xs font-bold text-neutral-500 mb-2">COLOR: {productColor.name.toUpperCase()}</p>
        <div className="flex flex-wrap gap-3 mb-6">
          {colors.map((color) => (
            <button
              key={color.name}
              onClick={() => setProductColor(color)}
              title={color.name}
              className={`w-10 h-10 rounded-full border-2 transition-all ${color.class} ${productColor.name === color.name ? 'ring-2 ring-offset-2 ring-neutral-900 scale-110' : color.border}`}
            />
          ))}
        </div>

        {selectedProduct.hasSize && (
          <>
            <div className="flex justify-between items-center mb-2">
              <p className="text-xs font-bold text-neutral-500">SIZE</p>
              <button className="text-xs text-yellow-600 font-bold hover:underline flex items-center gap-1">
                <Ruler className="w-3 h-3" /> Size Guide
              </button>
            </div>
            <div className="grid grid-cols-5 gap-2">
              {sizeOptions.map((s) => (
                <button
                  key={s}
                  onClick={() => setSize(s)}
                  className={`py-2 rounded-lg font-bold text-sm transition-all border ${size === s ? 'bg-neutral-900 text-white border-neutral-900' : 'bg-white text-neutral-600 border-neutral-200 hover:border-neutral-900'}`}
                >
                  {s}
                </button>
              ))}
            </div>
          </>
        )}
      </div>

      {/* 3. Upload Artwork */}
      <div className="bg-white p-5 rounded-2xl border border-neutral-200 shadow-sm">
        <h3 className="font-bold text-neutral-900 mb-3 text-sm uppercase tracking-wider">3. Upload Artwork</h3>
        <label className="w-full flex flex-col items-center justify-center px-4 py-6 border-2 border-neutral-300 border-dashed rounded-xl cursor-pointer bg-neutral-50 hover:bg-neutral-100 transition-colors">
          <Upload className="w-6 h-6 text-neutral-400 mb-2" />
          <span className="text-sm font-bold text-neutral-600">Click to upload PNG or JPG</span>
          <input type="file" className="hidden" accept="image/png, image/jpeg" onChange={handleImageUpload} />
        </label>
      </div>

      {/* 4. Add Text */}
      <div className="bg-white p-5 rounded-2xl border border-neutral-200 shadow-sm">
        <h3 className="font-bold text-neutral-900 mb-3 text-sm uppercase tracking-wider">4. Add Custom Text</h3>
        <input
          type="text"
          value={customText}
          onChange={(e) => setCustomText(e.target.value)}
          placeholder="Enter your custom phrase..."
          className="w-full px-4 py-3 border border-neutral-200 rounded-xl mb-4 outline-none focus:ring-2 focus:ring-yellow-500 !text-black placeholder-neutral-400"
        />
        <div className="space-y-4">
          <div className="flex gap-2">
            <select 
              value={fontFamily} 
              onChange={(e) => setFontFamily(e.target.value)}
              className="flex-1 bg-neutral-50 border border-neutral-200 text-neutral-900 text-sm rounded-lg focus:ring-yellow-500 outline-none cursor-pointer p-2"
            >
              {fontOptions.map(font => <option key={font} value={font} style={{ fontFamily: font }}>{font}</option>)}
            </select>
          </div>
        </div>
      </div>

      {/* Action Area */}
      <div className="mt-2 bg-neutral-900 p-6 rounded-2xl shadow-lg text-white">
        <div className="flex justify-between items-center mb-6 border-b border-neutral-700 pb-6">
          <span className="font-bold text-neutral-300">Quantity</span>
          <div className="flex items-center gap-4 bg-neutral-800 rounded-full px-2 py-1 border border-neutral-700">
            <button onClick={() => setQuantity(Math.max(1, quantity - 1))} className="p-2 hover:text-yellow-500 transition-colors"><Minus className="w-4 h-4" /></button>
            <span className="font-black w-6 text-center">{quantity}</span>
            <button onClick={() => setQuantity(quantity + 1)} className="p-2 hover:text-yellow-500 transition-colors"><Plus className="w-4 h-4" /></button>
          </div>
        </div>

        <div className="flex justify-between items-end mb-6">
          <div>
            <p className="text-sm text-neutral-400 font-medium mb-1">
              {discount.percent > 0 ? <span className="text-green-400 font-bold">{discount.percent}% Bulk Discount</span> : 'Total Price'}
            </p>
            <div className="flex items-baseline gap-2">
              <p className="text-4xl font-black">${totalPrice.toFixed(2)}</p>
            </div>
            <p className="text-xs text-neutral-500 mt-1">${unitPrice.toFixed(2)} / each</p>
          </div>
        </div>
        
        <div className="flex flex-col gap-3">
          <button onClick={() => handleAddToCart(unitPrice)} disabled={isAdding} className="w-full bg-yellow-500 text-neutral-900 font-black py-4 rounded-xl flex items-center justify-center gap-2 hover:bg-yellow-400 transition-colors shadow-md disabled:opacity-50">
            {isAdding ? <RefreshCcw className="w-5 h-5 animate-spin" /> : <ShoppingCart className="w-5 h-5" />} 
            {isAdding ? 'Adding...' : 'Add to Cart'}
          </button>
          
          {/* RESTORED SAVE AND SHARE BUTTONS */}
          <div className="flex gap-3">
            <button onClick={handleSaveDesign} disabled={isSaving} className="flex-1 bg-neutral-800 text-white font-bold py-3 rounded-xl flex items-center justify-center gap-2 hover:bg-neutral-700 transition-colors border border-neutral-700 disabled:opacity-50 text-sm">
              {isSaving ? <RefreshCcw className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />} Save
            </button>
            <button onClick={handleShare} className="flex-1 bg-neutral-800 text-white font-bold py-3 rounded-xl flex items-center justify-center gap-2 hover:bg-neutral-700 transition-colors border border-neutral-700 text-sm">
              {isCopied ? <Check className="w-4 h-4 text-green-400" /> : <Share2 className="w-4 h-4" />} 
              {isCopied ? 'Copied!' : 'Share Link'}
            </button>
          </div>

        </div>
      </div>
    </div>
  );
}