"use client";

import React, { useState } from 'react';
import { X, Plus, Tag } from 'lucide-react';
import { catalogService } from '@/services/api/catalogService';

interface CreateAttributeModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSuccess: (newAttr: { attribute_id: string; name: string; code: string }) => void;
}

export const CreateAttributeModal: React.FC<CreateAttributeModalProps> = ({
  isOpen,
  onClose,
  onSuccess
}) => {
  const [name, setName] = useState('');
  const [code, setCode] = useState('');
  const [presetValuesStr, setPresetValuesStr] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  if (!isOpen) return null;

  const handleNameChange = (val: string) => {
    setName(val);
    if (!code) {
      setCode(val.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, ''));
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!name.trim() || !code.trim()) {
      setError('Name and Code are required.');
      return;
    }

    setLoading(true);
    setError('');

    try {
      const presets = presetValuesStr
        .split(',')
        .map(v => v.trim())
        .filter(Boolean);

      const created = await catalogService.createAttribute({
        name: name.trim(),
        code: code.trim(),
        preset_values: presets.length ? presets : undefined
      });

      onSuccess({
        attribute_id: created.attribute_id,
        name: created.name,
        code: created.code
      });
      setName('');
      setCode('');
      setPresetValuesStr('');
      onClose();
    } catch (err: any) {
      console.error('Failed to create attribute type:', err);
      setError(err?.message || 'Failed to create attribute type.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="fixed inset-0 z-[200] bg-slate-950/80 backdrop-blur-xs flex items-center justify-center p-4">
      <div className="bg-slate-900 border border-slate-700/80 rounded-2xl w-full max-w-md shadow-2xl overflow-hidden font-sans">
        <div className="flex items-center justify-between px-5 py-4 border-b border-slate-800 bg-slate-800/50">
          <div className="flex items-center gap-2">
            <Tag size={18} className="text-red-500" />
            <h3 className="text-sm font-bold text-slate-100">Create New Attribute Type</h3>
          </div>
          <button
            type="button"
            onClick={onClose}
            className="text-slate-400 hover:text-white p-1 rounded-lg hover:bg-slate-700/60 transition-colors"
          >
            <X size={16} />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="p-5 space-y-4">
          {error && (
            <div className="bg-red-500/10 border border-red-500/30 text-red-400 p-2.5 rounded-lg text-xs">
              {error}
            </div>
          )}

          <div>
            <label className="block text-xs font-bold text-slate-300 mb-1.5">
              Attribute Display Name *
            </label>
            <input
              type="text"
              value={name}
              onChange={(e) => handleNameChange(e.target.value)}
              placeholder="e.g. Screen Quality, Storage Capacity"
              className="w-full bg-slate-850 border border-slate-700/70 rounded-xl px-3.5 py-2 text-xs text-white focus:outline-none focus:border-red-500 transition-colors"
            />
          </div>

          <div>
            <label className="block text-xs font-bold text-slate-300 mb-1.5">
              Attribute Code (Slug) *
            </label>
            <input
              type="text"
              value={code}
              onChange={(e) => setCode(e.target.value)}
              placeholder="e.g. screen_quality, storage"
              className="w-full bg-slate-850 border border-slate-700/70 rounded-xl px-3.5 py-2 text-xs text-white focus:outline-none focus:border-red-500 transition-colors font-mono"
            />
          </div>

          <div>
            <label className="block text-xs font-bold text-slate-300 mb-1.5">
              Preset Values (Optional, comma-separated)
            </label>
            <input
              type="text"
              value={presetValuesStr}
              onChange={(e) => setPresetValuesStr(e.target.value)}
              placeholder="e.g. OLED, Incell, Original"
              className="w-full bg-slate-850 border border-slate-700/70 rounded-xl px-3.5 py-2 text-xs text-white focus:outline-none focus:border-red-500 transition-colors"
            />
          </div>

          <div className="flex items-center justify-end gap-3 pt-3 border-t border-slate-800">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 text-xs font-bold text-slate-300 hover:text-white bg-slate-800 hover:bg-slate-700 rounded-xl transition-colors"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={loading}
              className="px-4 py-2 text-xs font-bold text-white bg-red-600 hover:bg-red-500 rounded-xl transition-colors flex items-center gap-1.5 disabled:opacity-50"
            >
              <Plus size={14} />
              <span>{loading ? 'Creating...' : 'Create Attribute'}</span>
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};