'use client';

import React, { useState } from 'react';
import { FeatureDefinition } from '@/types';

interface FeatureDefinitionModalProps {
  feature: FeatureDefinition | null;
  onClose: () => void;
  onSave: (updatedFeature: Partial<FeatureDefinition> & { id: string }) => Promise<void>;
}

export default function FeatureDefinitionModal({
  feature,
  onClose,
  onSave,
}: FeatureDefinitionModalProps) {
  if (!feature) return null;

  const [name, setName] = useState(feature.name || '');
  const [description, setDescription] = useState(feature.description || '');
  const [category, setCategory] = useState(feature.category || 'General');
  const [displayOrder, setDisplayOrder] = useState(String(feature.display_order ?? 1));
  const [isVisible, setIsVisible] = useState(feature.is_visible ?? true);

  // Free Tier
  const [basicValue, setBasicValue] = useState(feature.basic_value || '');
  const [basicEnabled, setBasicEnabled] = useState(feature.basic_enabled ?? false);
  const [basicLimit, setBasicLimit] = useState(feature.basic_limit != null ? String(feature.basic_limit) : '');

  // Growth Tier
  const [growthValue, setGrowthValue] = useState(feature.growth_value || '');
  const [growthEnabled, setGrowthEnabled] = useState(feature.growth_enabled ?? true);
  const [growthLimit, setGrowthLimit] = useState(feature.growth_limit != null ? String(feature.growth_limit) : '');

  // Scale Tier
  const [scaleValue, setScaleValue] = useState(feature.scale_value || '');
  const [scaleEnabled, setScaleEnabled] = useState(feature.scale_enabled ?? true);
  const [scaleLimit, setScaleLimit] = useState(feature.scale_limit != null ? String(feature.scale_limit) : '');

  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');

    setIsSubmitting(true);
    try {
      await onSave({
        id: feature.id,
        name: name.trim() || feature.name,
        description: description.trim() || null,
        category: category.trim() || 'General',
        display_order: parseInt(displayOrder, 10) || 1,
        is_visible: isVisible,
        basic_value: basicValue.trim(),
        basic_enabled: basicEnabled,
        basic_limit: basicLimit.trim() === '' ? null : parseInt(basicLimit, 10),
        growth_value: growthValue.trim(),
        growth_enabled: growthEnabled,
        growth_limit: growthLimit.trim() === '' ? null : parseInt(growthLimit, 10),
        scale_value: scaleValue.trim(),
        scale_enabled: scaleEnabled,
        scale_limit: scaleLimit.trim() === '' ? null : parseInt(scaleLimit, 10),
      });
      onClose();
    } catch (err: any) {
      setError(err?.message || 'Failed to update feature');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl border border-slate-200 shadow-2xl w-full max-w-2xl overflow-hidden animate-in fade-in zoom-in-95 max-h-[90vh] flex flex-col">
        {/* Header */}
        <div className="p-5 border-b border-slate-100 flex items-center justify-between shrink-0">
          <div className="flex items-center gap-2.5">
            <div className="w-8 h-8 rounded-lg bg-indigo-50 text-indigo-600 flex items-center justify-center font-bold text-xs">
              <i className="fa-solid fa-sliders" />
            </div>
            <div>
              <h3 className="text-sm font-bold text-slate-900">
                Edit Feature Entitlement: {feature.name}
              </h3>
              <p className="text-[11px] text-slate-400 font-mono">
                Key: {feature.id} &bull; Directly controls plan comparison table &amp; backend enforcement
              </p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="w-8 h-8 rounded-lg text-slate-400 hover:text-slate-600 flex items-center justify-center cursor-pointer"
          >
            ✕
          </button>
        </div>

        {/* Form Body */}
        <form onSubmit={handleSubmit} className="p-5 space-y-4 text-xs overflow-y-auto flex-1">
          {error && (
            <div className="p-3 rounded-lg bg-rose-50 border border-rose-200 text-rose-700 font-medium">
              {error}
            </div>
          )}

          {/* General Metadata */}
          <div className="space-y-3 border-b border-slate-100 pb-4">
            <h4 className="text-[11px] font-extrabold uppercase tracking-wider text-slate-500">Feature Identity</h4>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <div className="space-y-1">
                <label className="font-bold text-slate-700">Display Label *</label>
                <input
                  type="text"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  required
                  className="w-full px-3 py-2 rounded-lg border border-slate-200 text-slate-800 font-semibold focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
                  placeholder="e.g. Meta Pixel Count"
                />
              </div>

              <div className="space-y-1">
                <label className="font-bold text-slate-700">Category</label>
                <input
                  type="text"
                  value={category}
                  onChange={(e) => setCategory(e.target.value)}
                  className="w-full px-3 py-2 rounded-lg border border-slate-200 text-slate-800 font-semibold focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
                  placeholder="e.g. Tracking & Pixels"
                />
              </div>
            </div>

            <div className="space-y-1">
              <label className="font-bold text-slate-700">Description / Merchant Help Text</label>
              <textarea
                rows={2}
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                className="w-full px-3 py-2 rounded-lg border border-slate-200 text-slate-800 font-medium focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
                placeholder="What this feature does and why merchants need it..."
              />
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <div className="space-y-1">
                <label className="font-bold text-slate-700">Comparison Table Order</label>
                <input
                  type="number"
                  min="1"
                  value={displayOrder}
                  onChange={(e) => setDisplayOrder(e.target.value)}
                  className="w-full px-3 py-2 rounded-lg border border-slate-200 text-slate-800 font-semibold focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
                />
              </div>

              <div className="flex items-center justify-between p-3 rounded-lg border border-slate-200 bg-slate-50/70">
                <div>
                  <span className="font-bold text-slate-800 text-xs block">Visible on /pricing</span>
                  <span className="text-[10px] text-slate-500">Show in comparison matrix</span>
                </div>
                <input
                  type="checkbox"
                  checked={isVisible}
                  onChange={(e) => setIsVisible(e.target.checked)}
                  className="h-4 w-4 rounded text-indigo-600 focus:ring-indigo-500"
                />
              </div>
            </div>
          </div>

          {/* Tier Entitlements */}
          <div className="space-y-3">
            <h4 className="text-[11px] font-extrabold uppercase tracking-wider text-slate-500">Tier Entitlements &amp; Values</h4>

            {/* Free Plan */}
            <div className="p-3.5 rounded-xl border border-slate-200 bg-slate-50/50 space-y-2">
              <div className="flex items-center justify-between">
                <span className="font-bold text-slate-800 text-xs">Free Plan</span>
                <label className="flex items-center gap-1.5 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={basicEnabled}
                    onChange={(e) => setBasicEnabled(e.target.checked)}
                    className="rounded text-indigo-600"
                  />
                  <span className="text-[11px] font-medium text-slate-700">Available</span>
                </label>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                <div>
                  <label className="text-[10px] text-slate-500 block mb-0.5">Display Text (e.g. 1 Pixel, No)</label>
                  <input
                    type="text"
                    value={basicValue}
                    onChange={(e) => setBasicValue(e.target.value)}
                    className="w-full px-2.5 py-1.5 rounded-lg border border-slate-200 text-xs"
                    placeholder="1 Pixel"
                  />
                </div>
                <div>
                  <label className="text-[10px] text-slate-500 block mb-0.5">Numeric Limit (Blank = Unlimited)</label>
                  <input
                    type="number"
                    value={basicLimit}
                    onChange={(e) => setBasicLimit(e.target.value)}
                    className="w-full px-2.5 py-1.5 rounded-lg border border-slate-200 text-xs"
                    placeholder="1"
                  />
                </div>
              </div>
            </div>

            {/* Growth Plan */}
            <div className="p-3.5 rounded-xl border border-indigo-100 bg-indigo-50/30 space-y-2">
              <div className="flex items-center justify-between">
                <span className="font-bold text-indigo-900 text-xs">Growth Plan</span>
                <label className="flex items-center gap-1.5 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={growthEnabled}
                    onChange={(e) => setGrowthEnabled(e.target.checked)}
                    className="rounded text-indigo-600"
                  />
                  <span className="text-[11px] font-medium text-slate-700">Available</span>
                </label>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                <div>
                  <label className="text-[10px] text-slate-500 block mb-0.5">Display Text (e.g. Unlimited, 3 Feeds)</label>
                  <input
                    type="text"
                    value={growthValue}
                    onChange={(e) => setGrowthValue(e.target.value)}
                    className="w-full px-2.5 py-1.5 rounded-lg border border-slate-200 text-xs"
                    placeholder="Unlimited"
                  />
                </div>
                <div>
                  <label className="text-[10px] text-slate-500 block mb-0.5">Numeric Limit (Blank = Unlimited)</label>
                  <input
                    type="number"
                    value={growthLimit}
                    onChange={(e) => setGrowthLimit(e.target.value)}
                    className="w-full px-2.5 py-1.5 rounded-lg border border-slate-200 text-xs"
                    placeholder="Blank for unlimited"
                  />
                </div>
              </div>
            </div>

            {/* Scale Plan */}
            <div className="p-3.5 rounded-xl border border-purple-100 bg-purple-50/30 space-y-2">
              <div className="flex items-center justify-between">
                <span className="font-bold text-purple-900 text-xs">Scale Plan</span>
                <label className="flex items-center gap-1.5 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={scaleEnabled}
                    onChange={(e) => setScaleEnabled(e.target.checked)}
                    className="rounded text-indigo-600"
                  />
                  <span className="text-[11px] font-medium text-slate-700">Available</span>
                </label>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                <div>
                  <label className="text-[10px] text-slate-500 block mb-0.5">Display Text (e.g. Unlimited, Yes)</label>
                  <input
                    type="text"
                    value={scaleValue}
                    onChange={(e) => setScaleValue(e.target.value)}
                    className="w-full px-2.5 py-1.5 rounded-lg border border-slate-200 text-xs"
                    placeholder="Unlimited"
                  />
                </div>
                <div>
                  <label className="text-[10px] text-slate-500 block mb-0.5">Numeric Limit (Blank = Unlimited)</label>
                  <input
                    type="number"
                    value={scaleLimit}
                    onChange={(e) => setScaleLimit(e.target.value)}
                    className="w-full px-2.5 py-1.5 rounded-lg border border-slate-200 text-xs"
                    placeholder="Blank for unlimited"
                  />
                </div>
              </div>
            </div>
          </div>

          {/* Actions */}
          <div className="flex items-center justify-end gap-2 pt-3 border-t border-slate-100">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 rounded-lg text-xs font-semibold bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 cursor-pointer"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={isSubmitting}
              className="px-4 py-2 rounded-lg text-xs font-bold bg-indigo-600 hover:bg-indigo-700 text-white shadow-xs flex items-center gap-1.5 transition-colors cursor-pointer"
            >
              {isSubmitting && <i className="fa-solid fa-arrows-rotate fa-spin text-xs" />}
              <span>Save Feature Changes</span>
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}