'use client';

import type { ProductData, FormErrors } from '@/types/product.types';

interface PricingStepProps {
  formData: ProductData;
  updateFormData: <K extends keyof ProductData>(key: K, value: ProductData[K]) => void;
  errors: FormErrors;
}

const INPUT_STYLE = {
  background: 'var(--color-surface-alt)',
  border: '1px solid var(--color-border)',
  color: 'var(--color-text)',
} as const;

const LABEL_STYLE = { color: 'var(--color-text-secondary)' } as const;
const ERROR_STYLE = { color: 'var(--color-danger)' } as const;

export default function PricingStep({ formData, updateFormData, errors }: PricingStepProps) {
  return (
    <div className="space-y-6">
      <h2 className="text-lg font-semibold" style={{ color: 'var(--color-text)' }}>
        Pricing &amp; Inventory
      </h2>
      <p className="text-sm mb-4" style={{ color: 'var(--color-text-secondary)' }}>
        Set product pricing and stock management
      </p>

      {/* Pricing */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {/* Price */}
        <div>
          <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
            Price <span className="text-red-500">*</span>
          </label>
          <div className="relative">
            <span
              className="absolute left-3 top-2.5 text-sm"
              style={{ color: 'var(--color-text-tertiary)' }}
            >
              $
            </span>
            <input
              type="number"
              step="0.01"
              min="0"
              value={formData.price}
              onChange={(e) => updateFormData('price', parseFloat(e.target.value) || 0)}
              className="w-full pl-7 pr-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20"
              style={{
                ...INPUT_STYLE,
                border: errors['price']
                  ? '1px solid var(--color-danger)'
                  : '1px solid var(--color-border)',
              }}
            />
          </div>
          {errors['price'] && (
            <p className="text-xs mt-1" style={ERROR_STYLE}>{errors['price']}</p>
          )}
        </div>

        {/* Compare Price */}
        <div>
          <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
            Compare Price
          </label>
          <div className="relative">
            <span
              className="absolute left-3 top-2.5 text-sm"
              style={{ color: 'var(--color-text-tertiary)' }}
            >
              $
            </span>
            <input
              type="number"
              step="0.01"
              min="0"
              value={formData.compare_price ?? ''}
              onChange={(e) =>
                updateFormData(
                  'compare_price',
                  e.target.value ? parseFloat(e.target.value) : null,
                )
              }
              className="w-full pl-7 pr-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20"
              style={{
                ...INPUT_STYLE,
                border: errors['compare_price']
                  ? '1px solid var(--color-danger)'
                  : '1px solid var(--color-border)',
              }}
            />
          </div>
          {errors['compare_price'] && (
            <p className="text-xs mt-1" style={ERROR_STYLE}>{errors['compare_price']}</p>
          )}
          <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
            Original price for sale / discount display
          </p>
        </div>

        {/* Cost Price */}
        <div>
          <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
            Cost Price
          </label>
          <div className="relative">
            <span
              className="absolute left-3 top-2.5 text-sm"
              style={{ color: 'var(--color-text-tertiary)' }}
            >
              $
            </span>
            <input
              type="number"
              step="0.01"
              min="0"
              value={formData.cost_price ?? ''}
              onChange={(e) =>
                updateFormData(
                  'cost_price',
                  e.target.value ? parseFloat(e.target.value) : null,
                )
              }
              className="w-full pl-7 pr-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20"
              style={{
                ...INPUT_STYLE,
                border: errors['cost_price']
                  ? '1px solid var(--color-danger)'
                  : '1px solid var(--color-border)',
              }}
            />
          </div>
          {errors['cost_price'] && (
            <p className="text-xs mt-1" style={ERROR_STYLE}>{errors['cost_price']}</p>
          )}
          <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
            Your cost price (for profit calculation)
          </p>
        </div>
      </div>

      {/* Inventory */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
            Stock Quantity <span className="text-red-500">*</span>
          </label>
          <input
            type="number"
            min="0"
            value={formData.stock_quantity}
            onChange={(e) =>
              updateFormData('stock_quantity', parseInt(e.target.value) || 0)
            }
            className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20"
            style={{
              ...INPUT_STYLE,
              border: errors['stock_quantity']
                ? '1px solid var(--color-danger)'
                : '1px solid var(--color-border)',
            }}
          />
          {errors['stock_quantity'] && (
            <p className="text-xs mt-1" style={ERROR_STYLE}>{errors['stock_quantity']}</p>
          )}
        </div>

        <div>
          <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
            Stock Status
          </label>
          <select
            value={formData.stock_status}
            onChange={(e) =>
              updateFormData('stock_status', e.target.value as ProductData['stock_status'])
            }
            className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20"
            style={{
              ...INPUT_STYLE,
              border: errors['stock_status']
                ? '1px solid var(--color-danger)'
                : '1px solid var(--color-border)',
            }}
          >
            <option value="in_stock">In Stock</option>
            <option value="out_of_stock">Out of Stock</option>
            <option value="backorder">Backorder</option>
          </select>
          {errors['stock_status'] && (
            <p className="text-xs mt-1" style={ERROR_STYLE}>{errors['stock_status']}</p>
          )}
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
            Minimum Stock Threshold
          </label>
          <input
            type="number"
            min="0"
            value={formData.min_stock_threshold}
            onChange={(e) =>
              updateFormData('min_stock_threshold', parseInt(e.target.value) || 0)
            }
            className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20"
            style={INPUT_STYLE}
          />
          <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
            Alert when stock drops below this level
          </p>
        </div>

        <div className="flex items-end">
          <div className="flex items-center gap-3">
            <input
              type="checkbox"
              id="allow_backorder"
              checked={formData.allow_backorder}
              onChange={(e) => updateFormData('allow_backorder', e.target.checked)}
              className="w-4 h-4 rounded focus:ring-2 focus:ring-cta/20"
              style={{ accentColor: 'var(--color-cta)' }}
            />
            <label htmlFor="allow_backorder" className="text-sm" style={LABEL_STYLE}>
              Allow Backorder
            </label>
          </div>
        </div>
      </div>

      {/* Pricing summary hints */}
      {formData.compare_price != null &&
        formData.compare_price > formData.price && (
          <div
            className="p-4 rounded-lg"
            style={{
              background: 'var(--color-success-light)',
              border: '1px solid var(--color-success)',
            }}
          >
            <p className="text-sm" style={{ color: 'var(--color-success)' }}>
              💰 Customers save ${(formData.compare_price - formData.price).toFixed(2)} on this product!
            </p>
          </div>
        )}

      {formData.cost_price != null && formData.price > 0 && (
        <div
          className="p-4 rounded-lg"
          style={{
            background: 'var(--color-info-light)',
            border: '1px solid var(--color-info)',
          }}
        >
          <p className="text-sm" style={{ color: 'var(--color-info)' }}>
            📊 Profit per unit: ${(formData.price - formData.cost_price).toFixed(2)}{' '}
            (
            {formData.cost_price > 0
              ? (((formData.price - formData.cost_price) / formData.cost_price) * 100).toFixed(0)
              : 0}
            % margin)
          </p>
        </div>
      )}
    </div>
  );
}