'use client';

import { useState, useCallback, useMemo } from 'react';
import { useRouter } from 'next/navigation';
import toast from 'react-hot-toast';
import { getApiErrorMessage } from '@/lib/utils/apiError';

interface Language {
  code: string;
  name: string;
  name_native: string;
  is_rtl: boolean;
  is_default: boolean;
  is_active: boolean;
}

interface Translation {
  language_code: string;
  name: string;
}

interface UnitTypeData {
  id?: string;
  is_active: boolean;
  translations: Translation[];
}

interface UnitTypeFormProps {
  mode: 'create' | 'edit';
  initialData?: UnitTypeData | null;
  languages: Language[];
}

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 UnitTypeForm({ mode, initialData, languages }: UnitTypeFormProps) {
  const router = useRouter();
  const isEditing = mode === 'edit';

  // Get active languages, default first
  const activeLanguages = useMemo(() => {
    return languages
      .filter(l => l.is_active)
      .sort((a, b) => {
        if (a.is_default) return -1;
        if (b.is_default) return 1;
        return a.name.localeCompare(b.name);
      });
  }, [languages]);

  const isMultiLang = activeLanguages.length > 1;

  // Get default language
  const defaultLanguage = activeLanguages.find(l => l.is_default) || activeLanguages[0];

  // Initialize translations
  const initialTranslations = useMemo(() => {
    if (isEditing && initialData?.translations && initialData.translations.length > 0) {
      return initialData.translations;
    }
    return activeLanguages.map(lang => ({
      language_code: lang.code,
      name: '',
    }));
  }, [isEditing, initialData, activeLanguages]);

  // State for active tab
  const [activeTab, setActiveTab] = useState<string>(defaultLanguage?.code || activeLanguages[0]?.code || 'en');

  // Form state
  const [formData, setFormData] = useState({
    is_active: initialData?.is_active !== undefined ? initialData.is_active : true,
    translations: initialTranslations,
  });

  const [loading, setLoading] = useState(false);
  const [errors, setErrors] = useState<Record<string, Record<string, string>>>({});

  const getTranslation = useCallback((languageCode: string) => {
    return formData.translations.find(t => t.language_code === languageCode);
  }, [formData.translations]);

  const handleTranslationChange = useCallback((languageCode: string, value: string) => {
    setFormData(prev => {
      const existingIndex = prev.translations.findIndex(t => t.language_code === languageCode);
      const newTranslations = [...prev.translations];
      
      if (existingIndex >= 0) {
        newTranslations[existingIndex] = { ...newTranslations[existingIndex], name: value };
      } else {
        newTranslations.push({ language_code: languageCode, name: value });
      }
      
      return { ...prev, translations: newTranslations };
    });
    
    // Clear error for this translation
    if (errors[languageCode]) {
      setErrors(prev => {
        const newErrors = { ...prev };
        delete newErrors[languageCode];
        return newErrors;
      });
    }
  }, [errors]);

  const handleStatusChange = useCallback(() => {
    setFormData(prev => ({ ...prev, is_active: !prev.is_active }));
  }, []);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setErrors({});
    setLoading(true);

    const hasValidTranslation = formData.translations.some(t => t.name.trim().length > 0);
    if (!hasValidTranslation) {
      toast.error('At least one translation is required');
      setLoading(false);
      return;
    }

    try {
      const url = isEditing ? `/api/unit-types/${initialData?.id}` : '/api/unit-types';
      const method = isEditing ? 'PUT' : 'POST';

      const payload = {
        is_active: formData.is_active,
        translations: formData.translations.filter(t => t.name.trim().length > 0),
      };

      const res = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });

      const data = await res.json();

      if (!res.ok || !data.success) {
        if (data.errors) {
          const fieldErrors: Record<string, Record<string, string>> = {};
          if (Array.isArray(data.errors)) {
            data.errors.forEach((err: { path: string[]; message: string }) => {
              if (err.path) {
                const match = err.path.join('.');
                if (match.includes('translations')) {
                  const langMatch = match.match(/translations\[(\d+)\]/);
                  if (langMatch) {
                    const idx = parseInt(langMatch[1]);
                    const translation = formData.translations[idx];
                    if (translation) {
                      fieldErrors[translation.language_code] = { name: err.message };
                    }
                  }
                }
              }
            });
          }
          setErrors(fieldErrors);
          toast.error('Please fix the validation errors');
        } else {
          toast.error(getApiErrorMessage(data, 'Failed to save unit type'));
        }
        return;
      }

      toast.success(data.message || (isEditing ? 'Unit type updated successfully' : 'Unit type created successfully'));
      router.push('/admin/dashboard/system/unit-types');
      router.refresh();
    } catch (err) {
      console.error('[UnitTypeForm]', err);
      toast.error('Network error — please try again');
    } finally {
      setLoading(false);
    }
  }

  // If no languages, show message
  if (activeLanguages.length === 0) {
    return (
      <div className="p-6 rounded-lg text-center" style={{
        background: 'var(--color-surface)',
        border: '1px solid var(--color-border)',
        borderRadius: 'var(--radius-card)',
      }}>
        <p style={{ color: 'var(--color-text-secondary)' }}>
          No active languages found. Please add languages first.
        </p>
      </div>
    );
  }

  return (
    <div className="p-6 md:p-8" style={{
      background: 'var(--color-surface)',
      border: '1px solid var(--color-border)',
      borderRadius: 'var(--radius-card)',
      boxShadow: 'var(--shadow-card-md)',
      maxWidth: '800px',
      width: '100%',
    }}>
      <form onSubmit={handleSubmit}>
        <div className="space-y-6">
          {/* Status Toggle */}
          <div>
            <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
              Active Status
            </label>
            <div className="flex items-center gap-3">
              <button
                type="button"
                onClick={handleStatusChange}
                className="px-4 py-2 rounded-lg text-sm font-medium transition-all"
                style={{
                  background: formData.is_active ? 'var(--color-success)' : 'var(--color-surface-alt)',
                  border: formData.is_active ? 'none' : '1px solid var(--color-border)',
                  color: formData.is_active ? 'white' : 'var(--color-text-secondary)',
                }}
              >
                {formData.is_active ? '✅ Active' : '❌ Inactive'}
              </button>
              <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
                Inactive unit types won&apos;t be available for selection
              </span>
            </div>
          </div>

          {/* Language Tabs + Fields */}
          <div>
            {isMultiLang && (
              <div>
                <label className="block text-sm font-medium mb-3" style={LABEL_STYLE}>
                  Translations <span className="text-red-500">*</span>
                </label>

                {/* Tab Headers */}
                <div className="flex flex-wrap gap-1 border-b" style={{ borderColor: 'var(--color-border)' }}>
                  {activeLanguages.map((lang) => {
                    const translation = getTranslation(lang.code);
                    const hasError = errors[lang.code]?.name;
                    const isRTL = lang.is_rtl;
                    const hasTranslation = translation?.name && translation.name.trim().length > 0;

                    return (
                      <button
                        key={lang.code}
                        type="button"
                        onClick={() => setActiveTab(lang.code)}
                        className={`px-4 py-2 text-sm font-medium transition-all whitespace-nowrap border-b-2 ${
                          activeTab === lang.code
                            ? 'border-cta text-cta'
                            : 'border-transparent text-text-secondary hover:text-text'
                        } ${hasError ? 'border-red-500' : ''}`}
                        style={{
                          color: activeTab === lang.code ? 'var(--color-cta)' : 'var(--color-text-secondary)',
                          borderColor: activeTab === lang.code ? 'var(--color-cta)' : 'transparent',
                          direction: isRTL ? 'rtl' : 'ltr',
                        }}
                      >
                        <span className="flex items-center gap-1">
                          {lang.is_default ? '⭐ ' : ''}
                          {lang.name_native}
                          <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
                            ({lang.code})
                          </span>
                          {hasTranslation && (
                            <span className="text-xs text-green-500">✅</span>
                          )}
                          {hasError && (
                            <span className="text-red-500">*</span>
                          )}
                        </span>
                      </button>
                    );
                  })}
                </div>
              </div>
            )}

            {/* Tab Content */}
            <div className="mt-4">
              {activeLanguages.map((lang) => {
                const isActive = activeTab === lang.code;
                const translation = getTranslation(lang.code);
                const value = translation?.name || '';
                const hasError = errors[lang.code]?.name;
                const isRTL = lang.is_rtl;

                return (
                  <div
                    key={lang.code}
                    className={isActive ? 'block' : 'hidden'}
                  >
                    <div>
                      <label
                        htmlFor={`name-${lang.code}`}
                        className="block text-sm font-medium mb-1.5"
                        style={LABEL_STYLE}
                      >
                        Name {isMultiLang && `in ${lang.name}`} <span className="text-red-500">*</span>
                      </label>
                      <input
                        id={`name-${lang.code}`}
                        type="text"
                        value={value}
                        onChange={(e) => handleTranslationChange(lang.code, e.target.value)}
                        placeholder={isMultiLang ? `Enter name in ${lang.name}` : 'Enter unit type name'}
                        className={`w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 ${hasError ? 'border-red-500' : ''}`}
                        style={{
                          ...INPUT_STYLE,
                          direction: isRTL ? 'rtl' : 'ltr',
                        }}
                      />
                      {hasError && (
                        <p className="text-xs mt-1" style={ERROR_STYLE}>{hasError}</p>
                      )}
                      {isMultiLang && (
                        <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
                          {lang.is_default ? '⭐ Default language' : `Translation in ${lang.name_native}`}
                          {isRTL && ' (RTL)'}
                        </p>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Form Actions */}
          <div className="flex gap-3 pt-4 border-t" style={{ borderColor: 'var(--color-border)' }}>
            <button
              type="submit"
              disabled={loading}
              className="px-6 py-2.5 rounded-lg text-sm font-medium transition-all disabled:opacity-50 hover:opacity-90"
              style={{ background: 'var(--color-cta)', color: 'white' }}
            >
              {loading ? (
                <span className="flex items-center gap-2">
                  <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"/>
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
                  </svg>
                  Saving...
                </span>
              ) : (isEditing ? 'Update Unit Type' : 'Create Unit Type')}
            </button>
            <button
              type="button"
              onClick={() => router.back()}
              className="px-6 py-2.5 rounded-lg text-sm font-medium transition-all hover:opacity-80"
              style={{
                background: 'var(--color-surface-alt)',
                color: 'var(--color-text)',
                border: '1px solid var(--color-border)',
              }}
            >
              Cancel
            </button>
          </div>
        </div>
      </form>
    </div>
  );
}