'use client';

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

interface LanguageData {
  id?: number;
  code: string;
  name: string;
  name_native: string;
  is_rtl: boolean;
  is_default: boolean;
  is_active: boolean;
  messages?: Record<string, unknown>;
}

interface LanguageFormProps {
  mode: 'create' | 'edit';
  initialData?: LanguageData | null;
}

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

  const [formData, setFormData] = useState({
    code: initialData?.code || '',
    name: initialData?.name || '',
    name_native: initialData?.name_native || '',
    is_rtl: initialData?.is_rtl || false,
    is_default: initialData?.is_default || false,
    is_active: initialData?.is_active !== undefined ? initialData.is_active : true,
  });

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

  // Raw src/messages/<code>.json content, edited as text. Edit mode starts
  // from the file the backend already read; create mode starts from a copy
  // of the default language's file (fetched below) so there's something to
  // translate from instead of an empty object.
  const [translationsText, setTranslationsText] = useState(
    initialData?.messages ? JSON.stringify(initialData.messages, null, 2) : '',
  );
  const [translationsLoading, setTranslationsLoading] = useState(!isEditing);

  useEffect(() => {
    if (isEditing) return;
    let cancelled = false;
    (async () => {
      try {
        const res = await fetch('/api/languages/template');
        const data = await res.json();
        if (!cancelled && data.success) {
          setTranslationsText(JSON.stringify(data.data.messages, null, 2));
        }
      } catch (err) {
        console.error('[LanguageForm] failed to load translations template', err);
      } finally {
        if (!cancelled) setTranslationsLoading(false);
      }
    })();
    return () => { cancelled = true; };
  }, [isEditing]);

  const handleChange = useCallback((field: string, value: string | boolean) => {
    setFormData(prev => ({ ...prev, [field]: value }));
    setErrors(prev => (prev[field] ? { ...prev, [field]: '' } : prev));
  }, []);

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

    let translations: Record<string, unknown> | undefined;
    if (translationsText.trim()) {
      try {
        const parsed = JSON.parse(translationsText);
        if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
          throw new Error('Must be a JSON object');
        }
        translations = parsed;
      } catch (err) {
        setErrors(prev => ({ ...prev, translations: `Invalid JSON: ${(err as Error).message}` }));
        toast.error('Fix the translations JSON before saving');
        return;
      }
    }

    setLoading(true);

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

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

      const data = await res.json();

      if (!res.ok || !data.success) {
        if (data.errors) {
          const fieldErrors: Record<string, string> = {};
          if (Array.isArray(data.errors)) {
            data.errors.forEach((err: { path: string[]; message: string }) => {
              if (err.path?.[0]) fieldErrors[err.path[0]] = err.message;
            });
          }
          setErrors(fieldErrors);
          toast.error('Please fix the validation errors');
        } else {
          toast.error(getApiErrorMessage(data, 'Failed to save language'));
        }
        return;
      }

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

  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">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Code */}
            <div>
              <label htmlFor="code" className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                Language Code <span className="text-red-500">*</span>
              </label>
              <input
                id="code"
                type="text"
                required
                value={formData.code}
                onChange={(e) => handleChange('code', e.target.value)}
                placeholder="e.g., en, en-US, ur"
                className={`w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 ${errors.code ? 'border-red-500' : ''}`}
                style={INPUT_STYLE}
              />
              <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
                ISO language code (e.g., en, en-US, ur)
              </p>
              {errors.code && <p className="text-xs mt-1" style={ERROR_STYLE}>{errors.code}</p>}
            </div>

            {/* Name */}
            <div>
              <label htmlFor="name" className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                Language Name <span className="text-red-500">*</span>
              </label>
              <input
                id="name"
                type="text"
                required
                value={formData.name}
                onChange={(e) => handleChange('name', e.target.value)}
                placeholder="e.g., English, Urdu"
                className={`w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 ${errors.name ? 'border-red-500' : ''}`}
                style={INPUT_STYLE}
              />
              {errors.name && <p className="text-xs mt-1" style={ERROR_STYLE}>{errors.name}</p>}
            </div>

            {/* Native Name */}
            <div>
              <label htmlFor="name_native" className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                Native Name <span className="text-red-500">*</span>
              </label>
              <input
                id="name_native"
                type="text"
                required
                value={formData.name_native}
                onChange={(e) => handleChange('name_native', e.target.value)}
                placeholder="e.g., English, اردو"
                className={`w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 ${errors.name_native ? 'border-red-500' : ''}`}
                style={INPUT_STYLE}
              />
              {errors.name_native && <p className="text-xs mt-1" style={ERROR_STYLE}>{errors.name_native}</p>}
            </div>

            {/* RTL Toggle */}
            <div>
              <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                Right-to-Left (RTL)
              </label>
              <div className="flex items-center gap-3">
                <button
                  type="button"
                  onClick={() => handleChange('is_rtl', !formData.is_rtl)}
                  className="px-4 py-2 rounded-lg text-sm font-medium transition-all"
                  style={{
                    background: formData.is_rtl ? 'var(--color-info)' : 'var(--color-surface-alt)',
                    border: formData.is_rtl ? 'none' : '1px solid var(--color-border)',
                    color: formData.is_rtl ? 'white' : 'var(--color-text-secondary)',
                  }}
                >
                  {formData.is_rtl ? '✅ RTL Enabled' : '❌ LTR'}
                </button>
                <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
                  Enable for Arabic, Urdu, Hebrew, etc.
                </span>
              </div>
            </div>

            {/* Default Language */}
            <div>
              <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                Default Language
              </label>
              <div className="flex items-center gap-3">
                <button
                  type="button"
                  onClick={() => handleChange('is_default', !formData.is_default)}
                  className="px-4 py-2 rounded-lg text-sm font-medium transition-all"
                  style={{
                    background: formData.is_default ? 'var(--color-success)' : 'var(--color-surface-alt)',
                    border: formData.is_default ? 'none' : '1px solid var(--color-border)',
                    color: formData.is_default ? 'white' : 'var(--color-text-secondary)',
                  }}
                >
                  {formData.is_default ? '⭐ Default' : 'Set as Default'}
                </button>
                <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
                  Only one language can be default
                </span>
              </div>
            </div>

            {/* Active Status */}
            <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={() => handleChange('is_active', !formData.is_active)}
                  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 languages won&apos;t be available for selection
                </span>
              </div>
            </div>
          </div>

          {/* Translations */}
          <div>
            <label htmlFor="translations" className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
              Translations (JSON)
            </label>
            <textarea
              id="translations"
              rows={16}
              value={translationsLoading ? 'Loading template…' : translationsText}
              disabled={translationsLoading}
              onChange={(e) => {
                setTranslationsText(e.target.value);
                setErrors(prev => (prev.translations ? { ...prev, translations: '' } : prev));
              }}
              spellCheck={false}
              className={`w-full px-4 py-2.5 rounded-lg text-xs font-mono outline-none transition-all focus:ring-2 focus:ring-cta/20 ${errors.translations ? 'border-red-500' : ''}`}
              style={INPUT_STYLE}
            />
            <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
              Written to src/messages/{formData.code || '<code>'}.json on save — same structure as the other
              locale files. {!isEditing && 'Pre-filled from the default language; edit the values, keep the keys.'}
            </p>
            {errors.translations && <p className="text-xs mt-1" style={ERROR_STYLE}>{errors.translations}</p>}
          </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 Language' : 'Create Language')}
            </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>
  );
}