'use client';

import { useState, useEffect } from 'react';
import { carmodooApi } from '@/lib/api';

interface CarTranslation {
  id: number;
  car_name: string;
  dealer_description: string;
  has_en: boolean;
  has_mn: boolean;
  has_ru: boolean;
}

interface CarTranslationDetail {
  car_id: number;
  car_name: string;
  dealer_description: string | null;
  translations: {
    en: string | null;
    mn: string | null;
    ru: string | null;
  };
  has_translations: boolean;
  papago_configured: boolean;
}

export default function DealerTranslationsPage() {
  const [untranslatedCars, setUntranslatedCars] = useState<CarTranslation[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedCar, setSelectedCar] = useState<CarTranslationDetail | null>(null);
  const [editMode, setEditMode] = useState(false);
  const [editData, setEditData] = useState({
    dealer_description: '',  // 한국어 원문
    dealer_description_en: '',
    dealer_description_mn: '',
    dealer_description_ru: '',
  });
  const [saving, setSaving] = useState(false);
  const [regenerating, setRegenerating] = useState(false);
  const [batchTranslating, setBatchTranslating] = useState(false);
  const [batchResult, setBatchResult] = useState<{
    total: number;
    success: number;
    failed: number;
  } | null>(null);

  useEffect(() => {
    loadUntranslatedCars();
  }, []);

  const loadUntranslatedCars = async () => {
    setLoading(true);
    try {
      const data = await carmodooApi.getUntranslatedCars(50);
      setUntranslatedCars(data.cars);
    } catch (err) {
      console.error('Failed to load untranslated cars:', err);
    } finally {
      setLoading(false);
    }
  };

  const loadCarTranslations = async (carId: number) => {
    try {
      const data = await carmodooApi.getCarTranslations(carId);
      setSelectedCar(data);
      setEditData({
        dealer_description: data.dealer_description || '',
        dealer_description_en: data.translations.en || '',
        dealer_description_mn: data.translations.mn || '',
        dealer_description_ru: data.translations.ru || '',
      });
      setEditMode(false);
    } catch (err) {
      console.error('Failed to load car translations:', err);
      alert('Failed to load translations');
    }
  };

  const handleSave = async () => {
    if (!selectedCar) return;
    setSaving(true);
    try {
      await carmodooApi.updateCarTranslations(selectedCar.car_id, editData);
      await loadCarTranslations(selectedCar.car_id);
      await loadUntranslatedCars();
      setEditMode(false);
      alert('Translations saved successfully');
    } catch (err) {
      console.error('Failed to save translations:', err);
      alert('Failed to save translations');
    } finally {
      setSaving(false);
    }
  };

  const handleRegenerate = async () => {
    if (!selectedCar) return;
    if (!confirm('Regenerate translations using Papago API? This will overwrite existing translations.')) return;

    setRegenerating(true);
    try {
      const result = await carmodooApi.regenerateTranslations(selectedCar.car_id);
      setSelectedCar({
        ...selectedCar,
        translations: result.translations,
        has_translations: true,
      });
      setEditData({
        dealer_description: selectedCar.dealer_description || '',
        dealer_description_en: result.translations.en || '',
        dealer_description_mn: result.translations.mn || '',
        dealer_description_ru: result.translations.ru || '',
      });
      await loadUntranslatedCars();
      alert('Translations regenerated successfully');
    } catch (err: any) {
      console.error('Failed to regenerate translations:', err);
      alert(err.response?.data?.detail || 'Failed to regenerate translations');
    } finally {
      setRegenerating(false);
    }
  };

  const handleBatchTranslate = async () => {
    if (!confirm('Translate all pending cars? This may take a while.')) return;

    setBatchTranslating(true);
    setBatchResult(null);
    try {
      const result = await carmodooApi.translateAllPending();
      setBatchResult({
        total: result.total,
        success: result.success,
        failed: result.failed,
      });
      await loadUntranslatedCars();
    } catch (err: any) {
      console.error('Failed to batch translate:', err);
      alert(err.response?.data?.detail || 'Failed to batch translate');
    } finally {
      setBatchTranslating(false);
    }
  };

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-800">Dealer Description Translations</h1>
          <p className="text-sm text-gray-500 mt-1">
            Manage translations for dealer descriptions before displaying to users
          </p>
        </div>
        <button
          onClick={handleBatchTranslate}
          disabled={batchTranslating || untranslatedCars.length === 0}
          className="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 disabled:opacity-50 flex items-center gap-2"
        >
          {batchTranslating ? (
            <>
              <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
              Translating...
            </>
          ) : (
            <>
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
              </svg>
              Translate All Pending
            </>
          )}
        </button>
      </div>

      {/* Batch Result */}
      {batchResult && (
        <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
          <h3 className="font-medium text-green-800 mb-2">Batch Translation Complete</h3>
          <div className="flex gap-6">
            <div>
              <span className="text-gray-600">Total:</span> <span className="font-bold">{batchResult.total}</span>
            </div>
            <div>
              <span className="text-gray-600">Success:</span> <span className="font-bold text-green-600">{batchResult.success}</span>
            </div>
            <div>
              <span className="text-gray-600">Failed:</span> <span className="font-bold text-red-600">{batchResult.failed}</span>
            </div>
          </div>
        </div>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Untranslated Cars List */}
        <div className="bg-white rounded-xl shadow-sm">
          <div className="p-4 border-b border-gray-200">
            <h2 className="font-semibold text-gray-800">
              Cars Without Translations ({untranslatedCars.length})
            </h2>
          </div>
          <div className="max-h-[600px] overflow-y-auto">
            {loading ? (
              <div className="flex justify-center py-8">
                <div className="w-8 h-8 border-4 border-primary-600 border-t-transparent rounded-full animate-spin"></div>
              </div>
            ) : untranslatedCars.length === 0 ? (
              <div className="py-8 text-center text-gray-500">
                All cars have translations
              </div>
            ) : (
              <div className="divide-y divide-gray-100">
                {untranslatedCars.map((car) => (
                  <button
                    key={car.id}
                    onClick={() => loadCarTranslations(car.id)}
                    className={`w-full p-4 text-left hover:bg-gray-50 transition ${
                      selectedCar?.car_id === car.id ? 'bg-blue-50' : ''
                    }`}
                  >
                    <div className="font-medium text-gray-800 truncate">{car.car_name}</div>
                    <div className="text-sm text-gray-500 truncate mt-1">{car.dealer_description}</div>
                    <div className="flex gap-2 mt-2">
                      <span className={`px-2 py-0.5 rounded text-xs ${car.has_en ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}`}>
                        EN {car.has_en ? '✓' : '✗'}
                      </span>
                      <span className={`px-2 py-0.5 rounded text-xs ${car.has_mn ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}`}>
                        MN {car.has_mn ? '✓' : '✗'}
                      </span>
                      <span className={`px-2 py-0.5 rounded text-xs ${car.has_ru ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}`}>
                        RU {car.has_ru ? '✓' : '✗'}
                      </span>
                    </div>
                  </button>
                ))}
              </div>
            )}
          </div>
        </div>

        {/* Translation Editor */}
        <div className="bg-white rounded-xl shadow-sm">
          <div className="p-4 border-b border-gray-200 flex justify-between items-center">
            <h2 className="font-semibold text-gray-800">Translation Editor</h2>
            {selectedCar && (
              <div className="flex gap-2">
                <button
                  onClick={handleRegenerate}
                  disabled={regenerating || !selectedCar.dealer_description}
                  className="px-3 py-1.5 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 disabled:opacity-50 text-sm flex items-center gap-1"
                >
                  {regenerating ? (
                    <div className="w-4 h-4 border-2 border-purple-600 border-t-transparent rounded-full animate-spin"></div>
                  ) : (
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                  )}
                  Regenerate
                </button>
                {!editMode ? (
                  <button
                    onClick={() => setEditMode(true)}
                    className="px-3 py-1.5 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 text-sm"
                  >
                    Edit
                  </button>
                ) : (
                  <div className="flex gap-1">
                    <button
                      onClick={handleSave}
                      disabled={saving}
                      className="px-3 py-1.5 bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50 text-sm"
                    >
                      {saving ? 'Saving...' : 'Save'}
                    </button>
                    <button
                      onClick={() => {
                        setEditMode(false);
                        if (selectedCar) {
                          setEditData({
                            dealer_description: selectedCar.dealer_description || '',
                            dealer_description_en: selectedCar.translations.en || '',
                            dealer_description_mn: selectedCar.translations.mn || '',
                            dealer_description_ru: selectedCar.translations.ru || '',
                          });
                        }
                      }}
                      className="px-3 py-1.5 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 text-sm"
                    >
                      Cancel
                    </button>
                  </div>
                )}
              </div>
            )}
          </div>

          {selectedCar ? (
            <div className="p-4 space-y-4">
              <div className="text-sm text-gray-500 mb-2">
                Car: <span className="font-medium text-gray-800">{selectedCar.car_name}</span>
                {!selectedCar.papago_configured && (
                  <span className="ml-2 px-2 py-0.5 bg-yellow-100 text-yellow-700 rounded text-xs">
                    Papago API not configured
                  </span>
                )}
              </div>

              {/* Korean Original */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Korean Original (한국어 원문)
                </label>
                {editMode ? (
                  <textarea
                    value={editData.dealer_description}
                    onChange={(e) => setEditData({ ...editData, dealer_description: e.target.value })}
                    className="w-full border border-gray-300 rounded-lg p-3 text-sm min-h-[100px]"
                    placeholder="Enter Korean description..."
                  />
                ) : (
                  <div className="bg-gray-50 rounded-lg p-3 text-sm text-gray-700 whitespace-pre-wrap max-h-40 overflow-y-auto">
                    {selectedCar.dealer_description || <span className="text-gray-400 italic">No description</span>}
                  </div>
                )}
              </div>

              {/* English */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  English Translation
                </label>
                {editMode ? (
                  <textarea
                    value={editData.dealer_description_en}
                    onChange={(e) => setEditData({ ...editData, dealer_description_en: e.target.value })}
                    className="w-full border border-gray-300 rounded-lg p-3 text-sm min-h-[100px]"
                    placeholder="Enter English translation..."
                  />
                ) : (
                  <div className="bg-blue-50 rounded-lg p-3 text-sm text-gray-700 whitespace-pre-wrap min-h-[60px]">
                    {selectedCar.translations.en || <span className="text-gray-400 italic">Not translated</span>}
                  </div>
                )}
              </div>

              {/* Mongolian */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Mongolian Translation (Монгол)
                </label>
                {editMode ? (
                  <textarea
                    value={editData.dealer_description_mn}
                    onChange={(e) => setEditData({ ...editData, dealer_description_mn: e.target.value })}
                    className="w-full border border-gray-300 rounded-lg p-3 text-sm min-h-[100px]"
                    placeholder="Enter Mongolian translation..."
                  />
                ) : (
                  <div className="bg-green-50 rounded-lg p-3 text-sm text-gray-700 whitespace-pre-wrap min-h-[60px]">
                    {selectedCar.translations.mn || <span className="text-gray-400 italic">Not translated (Using English)</span>}
                  </div>
                )}
              </div>

              {/* Russian */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Russian Translation (Русский)
                </label>
                {editMode ? (
                  <textarea
                    value={editData.dealer_description_ru}
                    onChange={(e) => setEditData({ ...editData, dealer_description_ru: e.target.value })}
                    className="w-full border border-gray-300 rounded-lg p-3 text-sm min-h-[100px]"
                    placeholder="Enter Russian translation..."
                  />
                ) : (
                  <div className="bg-red-50 rounded-lg p-3 text-sm text-gray-700 whitespace-pre-wrap min-h-[60px]">
                    {selectedCar.translations.ru || <span className="text-gray-400 italic">Not translated</span>}
                  </div>
                )}
              </div>
            </div>
          ) : (
            <div className="p-8 text-center text-gray-500">
              Select a car from the list to view and edit translations
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
