'use client';

import { useState, useEffect } from 'react';
import Image from 'next/image';
import api, { heroBannersApi, carmodooApi } from '@/lib/api';

interface CarmodooMaker {
  code: string;
  name: string;
}

interface CarmodooModel {
  code: string;
  name: string;
  type: string;
}

interface Grade {
  code: string;
  name: string;
}

interface CarmodooCarItem {
  id: string;
  car_name: string;
  maker_code?: string;
  maker_name?: string;
  model_code?: string;
  model_name?: string;
  car_type?: string;
  car_type_name?: string;
  grade?: string;
  grade_name?: string;
  year?: number;
  month?: number;
  mileage?: number;
  price?: number;
  fuel?: string;
  transmission?: string;
  color?: string;
  displacement?: number;
  car_number?: string;
  main_image?: string;
  images?: string[];
  options?: string[];
  dealer_name?: string;
  shop_name?: string;
  seize_count?: number;
  collateral_count?: number;
  check_num?: string;  // 성능점검번호
  car_key?: string;  // 암호화된 차량 키 (딜러 설명용)
}

interface LocalCar {
  id: number;
  source: string;
  source_id: string;
  car_name: string;
  year?: number;
  month?: number;
  mileage?: number;
  price_krw?: number;
  margin_krw?: number;
  margin_mn?: number;
  final_price_krw?: number;
  final_price_mn?: number;
  is_displayed?: boolean;
  fuel?: string;
  transmission?: string;
  color?: string;
  displacement?: number;
  car_number?: string;
  seize_count?: number;
  collateral_count?: number;
  dealer_name?: string;
  status: string;
  created_at: string;
  images?: { id: number; url: string; is_main: boolean; sort_order: number }[];
  maker?: { name: string };
  model?: { name: string };
}

interface SearchFilters {
  maker_code: string;
  model_code: string;
  grade: string;
  year_min: string;
  year_max: string;
  price_min: string;
  price_max: string;
  mileage_max: string;
  fuel: string;
  displacement_min: string;
  displacement_max: string;
}

const FUEL_TYPES = [
  { value: '', label: 'All' },
  { value: '가솔린', label: 'Gasoline' },
  { value: '디젤', label: 'Diesel' },
  { value: '하이브리드', label: 'Hybrid' },
  { value: '전기', label: 'Electric' },
  { value: 'LPG', label: 'LPG' },
];

// 이미지 URL 변환 (로컬 경로는 백엔드 URL 추가)
const getImageUrl = (url: string | undefined): string => {
  if (!url) return '';
  if (url.startsWith('http://') || url.startsWith('https://')) {
    return url;
  }
  return `http://localhost:8000${url}`;
};

const YEAR_OPTIONS = Array.from({ length: 15 }, (_, i) => 2024 - i);

type TabType = 'local' | 'all' | 'carmodoo';

export default function CarsAdminPage() {
  const [activeTab, setActiveTab] = useState<TabType>('local');

  // Local cars state
  const [localCars, setLocalCars] = useState<LocalCar[]>([]);
  const [localLoading, setLocalLoading] = useState(false);
  const [localTotal, setLocalTotal] = useState(0);
  const [localPage, setLocalPage] = useState(1);
  const [selectedCar, setSelectedCar] = useState<LocalCar | null>(null);
  const [showDetailModal, setShowDetailModal] = useState(false);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  // All Cars (public view) state
  const [allCars, setAllCars] = useState<LocalCar[]>([]);
  const [allCarsLoading, setAllCarsLoading] = useState(false);
  const [allCarsTotal, setAllCarsTotal] = useState(0);
  const [allCarsPage, setAllCarsPage] = useState(1);

  // Carmodoo search state
  const [makers, setMakers] = useState<CarmodooMaker[]>([]);
  const [models, setModels] = useState<CarmodooModel[]>([]);
  const [grades, setGrades] = useState<Grade[]>([]);
  const [cars, setCars] = useState<CarmodooCarItem[]>([]);
  const [selectedCars, setSelectedCars] = useState<Set<string>>(new Set());
  const [loading, setLoading] = useState(false);
  const [importing, setImporting] = useState(false);
  const [searched, setSearched] = useState(false);
  const [totalCount, setTotalCount] = useState(0);
  const [currentPage, setCurrentPage] = useState(1);
  const [filters, setFilters] = useState<SearchFilters>({
    maker_code: '',
    model_code: '',
    grade: '',
    year_min: '',
    year_max: '',
    price_min: '',
    price_max: '',
    mileage_max: '',
    fuel: '',
    displacement_min: '',
    displacement_max: '',
  });
  const [importResult, setImportResult] = useState<{
    imported: number;
    skipped: number;
    errors: number;
    pdfSuccess: number;
    pdfFailed: number;
    pdfDetails?: Array<{
      car_id: number;
      car_name: string;
      success: boolean;
      attempts: number;
      error?: string;
    }>;
  } | null>(null);
  const [pdfStatus, setPdfStatus] = useState<Record<number, boolean>>({});
  const [regeneratingPdf, setRegeneratingPdf] = useState<number | null>(null);
  const [registeringBanners, setRegisteringBanners] = useState(false);
  const [bannerResult, setBannerResult] = useState<{
    registered: number;
    imported: number;
    skipped: number;
    errors: number;
    pdfSuccess: number;
    pdfFailed: number;
    pdfDetails?: Array<{
      car_id: number;
      car_name: string;
      success: boolean;
      attempts: number;
      error?: string;
    }>;
  } | null>(null);

  // Dealer description editing state
  const [showDescEditModal, setShowDescEditModal] = useState(false);
  const [editingCar, setEditingCar] = useState<CarmodooCarItem | null>(null);
  const [originalDesc, setOriginalDesc] = useState('');
  const [editedDesc, setEditedDesc] = useState('');
  const [highlightedDesc, setHighlightedDesc] = useState('');
  const [sensitiveInfo, setSensitiveInfo] = useState<{ phones: number; addresses: number; others: number; total: number } | null>(null);
  const [loadingDesc, setLoadingDesc] = useState(false);
  const [editedDescriptions, setEditedDescriptions] = useState<Record<string, string>>({}); // car_id -> edited description

  // Dealer comment for detail modal
  const [dealerComment, setDealerComment] = useState<{
    ko: string | null;
    en: string | null;
    mn: string | null;
    ru: string | null;
  } | null>(null);
  const [loadingComment, setLoadingComment] = useState(false);
  const [editingComment, setEditingComment] = useState(false);
  const [editCommentData, setEditCommentData] = useState({
    ko: '',
    en: '',
    mn: '',
    ru: '',
  });
  const [savingComment, setSavingComment] = useState(false);

  useEffect(() => {
    loadLocalCars();
    loadAllCars();
    loadInitialData();
  }, []);

  // 제조사 변경 시 모델 목록 로드
  useEffect(() => {
    if (filters.maker_code) {
      loadModels(filters.maker_code);
      setGrades([]);
      setFilters((prev) => ({ ...prev, model_code: '', grade: '' }));
    } else {
      setModels([]);
      setGrades([]);
      setFilters((prev) => ({ ...prev, model_code: '', grade: '' }));
    }
  }, [filters.maker_code]);

  // 모델 변경 시 등급 목록 로드
  useEffect(() => {
    if (filters.maker_code && filters.model_code) {
      loadGrades(filters.maker_code, filters.model_code);
    } else {
      setGrades([]);
      setFilters((prev) => ({ ...prev, grade: '' }));
    }
  }, [filters.model_code]);

  const loadLocalCars = async (page = 1) => {
    setLocalLoading(true);
    try {
      const { data } = await api.get('/cars', { params: { page, page_size: 20, admin: true } });
      setLocalCars(data.cars || []);
      setLocalTotal(data.total || 0);
      setLocalPage(page);

      // Fetch PDF status for all cars
      const carIds = (data.cars || []).map((c: LocalCar) => c.id);
      if (carIds.length > 0) {
        try {
          const pdfRes = await api.post('/carmodoo/pdf-status', carIds);
          setPdfStatus(prev => ({ ...prev, ...pdfRes.data }));
        } catch (err) {
          console.error('Failed to fetch PDF status:', err);
        }
      }
    } catch (err) {
      console.error('Failed to load local cars:', err);
    } finally {
      setLocalLoading(false);
    }
  };

  const loadAllCars = async (page = 1) => {
    setAllCarsLoading(true);
    try {
      // Load only displayed cars (public view)
      const { data } = await api.get('/cars', { params: { page, page_size: 20 } });
      setAllCars(data.cars || []);
      setAllCarsTotal(data.total || 0);
      setAllCarsPage(page);

      // Fetch PDF status for all cars
      const carIds = (data.cars || []).map((c: LocalCar) => c.id);
      if (carIds.length > 0) {
        try {
          const pdfRes = await api.post('/carmodoo/pdf-status', carIds);
          setPdfStatus(prev => ({ ...prev, ...pdfRes.data }));
        } catch (err) {
          console.error('Failed to fetch PDF status:', err);
        }
      }
    } catch (err) {
      console.error('Failed to load all cars:', err);
    } finally {
      setAllCarsLoading(false);
    }
  };

  const handleUpdateCar = async (carId: number, updates: { margin_krw?: number; margin_mn?: number; is_displayed?: boolean }) => {
    try {
      await api.put(`/cars/${carId}`, updates);
      // Update local state
      setLocalCars(prev => prev.map(car =>
        car.id === carId
          ? {
              ...car,
              ...updates,
              final_price_krw: updates.margin_krw !== undefined
                ? (car.price_krw || 0) + updates.margin_krw
                : car.final_price_krw,
              final_price_mn: updates.margin_mn !== undefined
                ? (car.price_krw || 0) + updates.margin_mn
                : car.final_price_mn
            }
          : car
      ));
      // Also update selectedCar if it's the same
      if (selectedCar?.id === carId) {
        setSelectedCar(prev => prev ? {
          ...prev,
          ...updates,
          final_price_krw: updates.margin_krw !== undefined
            ? (prev.price_krw || 0) + updates.margin_krw
            : prev.final_price_krw,
          final_price_mn: updates.margin_mn !== undefined
            ? (prev.price_krw || 0) + updates.margin_mn
            : prev.final_price_mn
        } : null);
      }
    } catch (err) {
      console.error('Failed to update car:', err);
      alert('Failed to update car.');
    }
  };

  const handleToggleDisplay = async (car: LocalCar, e: React.MouseEvent) => {
    e.stopPropagation();
    await handleUpdateCar(car.id, { is_displayed: !car.is_displayed });
  };

  const loadInitialData = async () => {
    try {
      const makersRes = await api.get('/carmodoo/makers');
      setMakers(makersRes.data);
    } catch (err) {
      console.error('Failed to load initial data:', err);
    }
  };

  // Load grades when model changes
  const loadGrades = async (makerCode: string, modelCode: string) => {
    try {
      const { data } = await api.get(`/carmodoo/grades/${makerCode}/${modelCode}`);
      setGrades(data);
    } catch (err) {
      console.error('Failed to load grades:', err);
      setGrades([]);
    }
  };

  const loadModels = async (makerCode: string) => {
    try {
      const { data } = await api.get(`/carmodoo/models/${makerCode}`);
      setModels(data);
    } catch (err) {
      console.error('Failed to load models:', err);
      setModels([]);
    }
  };

  const handleFilterChange = (key: keyof SearchFilters, value: string) => {
    setFilters((prev) => ({ ...prev, [key]: value }));
  };

  const handleSearch = async (page = 1) => {
    setLoading(true);
    setImportResult(null);
    try {
      const params: Record<string, any> = { page, page_size: 20 };

      if (filters.maker_code) params.maker_code = filters.maker_code;
      if (filters.model_code) params.model_code = filters.model_code;
      if (filters.grade) params.grade = filters.grade;
      if (filters.year_min) params.year_min = parseInt(filters.year_min);
      if (filters.year_max) params.year_max = parseInt(filters.year_max);
      if (filters.price_min) params.price_min = parseInt(filters.price_min) * 10000;
      if (filters.price_max) params.price_max = parseInt(filters.price_max) * 10000;
      if (filters.mileage_max) params.mileage_max = parseInt(filters.mileage_max);
      if (filters.fuel) params.fuel = filters.fuel;
      if (filters.displacement_min) params.displacement_min = parseInt(filters.displacement_min);
      if (filters.displacement_max) params.displacement_max = parseInt(filters.displacement_max);

      const { data } = await api.get('/carmodoo/search', { params });
      setCars(data.cars);
      setTotalCount(data.total);
      setCurrentPage(page);
      setSearched(true);
      setSelectedCars(new Set());

      // 성능점검번호 재시도 결과 표시
      if (data.check_num_retried > 0) {
        const msg = `${data.check_num_retried}개 차량의 성능점검번호를 재시도하여 ${data.check_num_retry_success}개 성공`;
        console.log('[Carmodoo]', msg);
      }
    } catch (err) {
      console.error('Search failed:', err);
      alert('Search failed. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  const handleSelectCar = (carId: string) => {
    setSelectedCars((prev) => {
      const next = new Set(prev);
      if (next.has(carId)) {
        next.delete(carId);
      } else {
        next.add(carId);
      }
      return next;
    });
  };

  const handleSelectAll = () => {
    if (selectedCars.size === cars.length) {
      setSelectedCars(new Set());
    } else {
      setSelectedCars(new Set(cars.map((c) => c.id)));
    }
  };

  const handleImport = async () => {
    if (selectedCars.size === 0) {
      alert('Please select at least one car to import.');
      return;
    }

    if (!confirm(`Import ${selectedCars.size} selected car(s) to local database?`)) {
      return;
    }

    setImporting(true);
    try {
      const { data } = await api.post('/carmodoo/import', {
        car_ids: Array.from(selectedCars),
      });

      // PDF 상태 상세 정보 추출
      const pdfDetails = data.imported?.map((item: any) => ({
        car_id: item.car_id,
        car_name: item.car_name,
        success: item.pdf_status?.success || false,
        attempts: item.pdf_status?.attempts || 0,
        error: item.pdf_status?.error,
      })) || [];

      setImportResult({
        imported: data.summary.imported_count,
        skipped: data.summary.skipped_count,
        errors: data.summary.error_count,
        pdfSuccess: data.summary.pdf_success_count || 0,
        pdfFailed: data.summary.pdf_failed_count || 0,
        pdfDetails,
      });

      // Remove imported cars from selection and reload local cars
      setSelectedCars(new Set());
      loadLocalCars();
    } catch (err) {
      console.error('Import failed:', err);
      alert('Import failed. Please try again.');
    } finally {
      setImporting(false);
    }
  };

  const handleRegeneratePdf = async (carId: number, e: React.MouseEvent) => {
    e.stopPropagation();
    if (regeneratingPdf) return;

    setRegeneratingPdf(carId);
    try {
      // 먼저 fetch-check-num 시도 (check_num이 없는 경우 가져오기 + PDF 생성)
      const response = await api.post(`/carmodoo/car/${carId}/fetch-check-num`);
      if (response.data.pdf_path) {
        setPdfStatus(prev => ({ ...prev, [carId]: true }));
        alert('PDF 생성 완료!');
      } else if (response.data.check_number) {
        // check_number는 있지만 PDF 생성 실패
        alert(`성능점검번호(${response.data.check_number})를 가져왔으나 PDF 생성에 실패했습니다. 다시 시도해주세요.`);
      } else {
        alert('PDF 생성 실패: ' + (response.data.message || 'Unknown error'));
      }
    } catch (err: any) {
      console.error('PDF regeneration failed:', err);
      const errorMsg = err.response?.data?.detail || err.message;
      if (errorMsg.includes('Car number not available')) {
        alert('차량번호가 없어 성능점검번호를 가져올 수 없습니다.');
      } else if (errorMsg.includes('Could not find check number')) {
        alert('카모두에서 성능점검번호를 찾을 수 없습니다.');
      } else {
        alert('PDF 생성 실패: ' + errorMsg);
      }
    } finally {
      setRegeneratingPdf(null);
    }
  };

  // 차량명 번역 함수
  const translateCarName = (koreanName: string | undefined): string => {
    if (!koreanName) return '-';

    const translations: Record<string, string> = {
      '현대': 'Hyundai', '제네시스': 'Genesis', '기아': 'Kia',
      '쉐보레(대우)': 'Chevrolet', '쉐보레': 'Chevrolet',
      '르노(삼성)': 'Renault', 'KG모빌리티(쌍용)': 'KG Mobility',
      '닛산': 'Nissan', '렉서스': 'Lexus', '토요타': 'Toyota', '혼다': 'Honda',
      '쏘렌토': 'Sorento', '스포티지': 'Sportage', '셀토스': 'Seltos',
      '카니발': 'Carnival', '모닝': 'Morning', '레이': 'Ray',
      '아반떼': 'Avante', '쏘나타': 'Sonata', '그랜저': 'Grandeur',
      '투싼': 'Tucson', '싼타페': 'Santa Fe', '팰리세이드': 'Palisade',
      '코나': 'Kona', '스타리아': 'Staria', '캐스퍼': 'Casper',
    };

    let result = koreanName;
    const sortedKeys = Object.keys(translations).sort((a, b) => b.length - a.length);
    for (const korean of sortedKeys) {
      result = result.replace(new RegExp(korean, 'g'), translations[korean]);
    }
    return result;
  };

  // 딜러 설명 미리보기 및 편집 함수
  const handleEditDealerDescription = async (car: CarmodooCarItem) => {
    setEditingCar(car);
    setShowDescEditModal(true);
    setLoadingDesc(true);
    setOriginalDesc('');
    setEditedDesc('');
    setHighlightedDesc('');
    setSensitiveInfo(null);

    try {
      const response = await fetch(`/api/carmodoo/preview-dealer-description/${car.id}?car_key=${encodeURIComponent(car.car_key || '')}`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`,
        },
      });
      const data = await response.json();

      if (data.found) {
        setOriginalDesc(data.original);
        setHighlightedDesc(data.highlighted_html);
        setSensitiveInfo(data.summary);
        // 이미 편집된 설명이 있으면 사용, 없으면 마스킹된 텍스트 사용
        setEditedDesc(editedDescriptions[car.id] || data.masked_text);
      } else {
        setOriginalDesc('');
        setEditedDesc('');
        setHighlightedDesc('');
        setSensitiveInfo({ phones: 0, addresses: 0, others: 0, total: 0 });
      }
    } catch (err) {
      console.error('Failed to load dealer description:', err);
    } finally {
      setLoadingDesc(false);
    }
  };

  const handleSaveEditedDescription = () => {
    if (editingCar) {
      setEditedDescriptions(prev => ({
        ...prev,
        [editingCar.id]: editedDesc
      }));
    }
    setShowDescEditModal(false);
    setEditingCar(null);
  };

  const handleApplyMasked = () => {
    if (editingCar) {
      // 마스킹된 텍스트로 설정
      fetch('/api/carmodoo/check-sensitive-info', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('token')}`,
        },
        body: JSON.stringify({ text: originalDesc }),
      })
        .then(res => res.json())
        .then(data => {
          setEditedDesc(data.masked_text);
        });
    }
  };

  // 배너 등록 함수
  const handleRegisterAsBanner = async () => {
    if (selectedCars.size === 0) {
      alert('Please select at least one car to register as banner.');
      return;
    }

    if (!confirm(`${selectedCars.size}개의 차량을 Hero Banner로 등록하시겠습니까?`)) {
      return;
    }

    setRegisteringBanners(true);
    setBannerResult(null);
    try {
      const selectedCarsList = cars.filter(car => selectedCars.has(car.id));

      // 1. 먼저 차량을 로컬 DB에 저장 (이미지 다운로드 포함)
      const carsToImport = selectedCarsList.map(car => ({
        car_no: car.id,
        car_name: car.car_name || '',
        maker_name: car.maker_name,
        model_name: car.model_name,
        year: car.year,
        mileage: car.mileage,
        price: car.price,
        fuel: car.fuel,
        transmission: car.transmission,
        color: car.color,
        displacement: car.displacement,
        main_image: car.main_image,
        check_num: car.check_num,  // 성능점검번호
        car_key: car.car_key,  // 암호화된 차량 키 (딜러 설명용)
        dealer_description: editedDescriptions[car.id] || undefined,  // 편집된 딜러 설명
      }));

      const importResult = await carmodooApi.importCars(carsToImport);

      // 2. car_id 매핑 생성
      const carIdMap: Record<string, number> = {};
      for (const imp of importResult.imported) {
        carIdMap[imp.car_no] = imp.car_id;
      }
      for (const skip of importResult.skipped) {
        carIdMap[skip.car_no] = skip.car_id;
      }

      // 3. 기존 배너 목록 가져오기 (순서 설정용)
      const existingBanners = await heroBannersApi.adminGetList();
      let orderStart = existingBanners.length;
      let successCount = 0;

      // 4. Banner 생성 (car_id 연결)
      for (const car of selectedCarsList) {
        const carId = carIdMap[car.id];
        if (!carId) continue;

        const localImageUrl = `/uploads/cars/${carId}/image_0.jpg`;

        const bannerData = {
          title_ko: car.car_name || '',
          title_en: translateCarName(car.car_name),
          title_mn: translateCarName(car.car_name),
          subtitle_ko: `${car.year}년식 | ${car.mileage?.toLocaleString()}km`,
          subtitle_en: `${car.year} | ${car.mileage?.toLocaleString()}km`,
          subtitle_mn: `${car.year} | ${car.mileage?.toLocaleString()}km`,
          image_url: localImageUrl,
          link_url: `/cars/${carId}`,
          is_active: true,
          display_order: orderStart++,
          car_id: carId,
        };

        await heroBannersApi.adminCreate(bannerData);
        successCount++;
      }

      // PDF 상태 상세 정보 추출
      const pdfDetails = importResult.imported?.map((item: any) => ({
        car_id: item.car_id,
        car_name: item.car_name,
        success: item.pdf_status?.success || false,
        attempts: item.pdf_status?.attempts || 0,
        error: item.pdf_status?.error,
      })) || [];

      setBannerResult({
        registered: successCount,
        imported: importResult.summary?.imported_count || 0,
        skipped: importResult.summary?.skipped_count || 0,
        errors: importResult.summary?.error_count || 0,
        pdfSuccess: importResult.summary?.pdf_success_count || 0,
        pdfFailed: importResult.summary?.pdf_failed_count || 0,
        pdfDetails,
      });

      setSelectedCars(new Set());
      loadLocalCars();

      const pdfFailedCount = importResult.summary?.pdf_failed_count || 0;
      if (pdfFailedCount > 0) {
        alert(`${successCount}개의 차량이 Hero Banner로 등록되었습니다.\n(새로 가져온 차량: ${importResult.summary?.imported_count || 0}대)\n\n⚠️ ${pdfFailedCount}개 차량의 PDF 생성에 실패했습니다. 상세 내용을 확인하세요.`);
      } else {
        alert(`${successCount}개의 차량이 Hero Banner로 등록되었습니다.\n(새로 가져온 차량: ${importResult.summary?.imported_count || 0}대)`);
      }
    } catch (err) {
      console.error('Banner registration failed:', err);
      alert('배너 등록에 실패했습니다.');
    } finally {
      setRegisteringBanners(false);
    }
  };

  const handleDeleteCar = async (carId: number) => {
    if (!confirm('Are you sure you want to delete this car?')) {
      return;
    }

    try {
      await api.delete(`/cars/${carId}`);
      loadLocalCars(localPage);
      // 삭제 후 모달 닫기
      if (selectedCar?.id === carId) {
        setShowDetailModal(false);
        setSelectedCar(null);
      }
    } catch (err) {
      console.error('Delete failed:', err);
      alert('Failed to delete car.');
    }
  };

  const handleCarClick = async (car: LocalCar) => {
    setSelectedCar(car);
    setCurrentImageIndex(0);
    setShowDetailModal(true);
    setDealerComment(null);
    setEditingComment(false);

    // Fetch dealer comment translations
    setLoadingComment(true);
    try {
      const data = await carmodooApi.getCarTranslations(car.id);
      setDealerComment({
        ko: data.dealer_description,
        en: data.translations.en,
        mn: data.translations.mn,
        ru: data.translations.ru,
      });
    } catch (error) {
      console.error('Failed to load dealer comment:', error);
      setDealerComment(null);
    } finally {
      setLoadingComment(false);
    }
  };

  const closeDetailModal = () => {
    setShowDetailModal(false);
    setSelectedCar(null);
    setCurrentImageIndex(0);
    setDealerComment(null);
    setEditingComment(false);
  };

  const handleEditComment = () => {
    if (dealerComment) {
      setEditCommentData({
        ko: dealerComment.ko || '',
        en: dealerComment.en || '',
        mn: dealerComment.mn || '',
        ru: dealerComment.ru || '',
      });
      setEditingComment(true);
    }
  };

  const handleSaveComment = async () => {
    if (!selectedCar) return;

    setSavingComment(true);
    try {
      await carmodooApi.updateCarTranslations(selectedCar.id, {
        dealer_description: editCommentData.ko,
        dealer_description_en: editCommentData.en,
        dealer_description_mn: editCommentData.mn,
        dealer_description_ru: editCommentData.ru,
      });
      setDealerComment({
        ko: editCommentData.ko,
        en: editCommentData.en,
        mn: editCommentData.mn,
        ru: editCommentData.ru,
      });
      setEditingComment(false);
      alert('Dealer comment saved successfully!');
    } catch (error) {
      console.error('Failed to save dealer comment:', error);
      alert('Failed to save dealer comment');
    } finally {
      setSavingComment(false);
    }
  };

  const handleRegenerateTranslation = async () => {
    if (!selectedCar || !dealerComment?.ko) return;

    if (!confirm('Regenerate translations from Korean? This will overwrite existing translations.')) return;

    setSavingComment(true);
    try {
      const result = await carmodooApi.regenerateTranslations(selectedCar.id);
      setDealerComment({
        ko: dealerComment.ko,
        en: result.translations.en,
        mn: result.translations.mn,
        ru: result.translations.ru,
      });
      alert('Translations regenerated successfully!');
    } catch (error: any) {
      console.error('Failed to regenerate translations:', error);
      alert(error.response?.data?.detail || 'Failed to regenerate translations');
    } finally {
      setSavingComment(false);
    }
  };

  const nextImage = () => {
    if (selectedCar?.images && selectedCar.images.length > 0) {
      setCurrentImageIndex((prev) => (prev + 1) % selectedCar.images!.length);
    }
  };

  const prevImage = () => {
    if (selectedCar?.images && selectedCar.images.length > 0) {
      setCurrentImageIndex((prev) => (prev - 1 + selectedCar.images!.length) % selectedCar.images!.length);
    }
  };

  const formatPrice = (price?: number) => {
    if (!price) return '-';
    return `${(price / 10000).toLocaleString()}만원`;
  };

  const formatMileage = (mileage?: number) => {
    if (!mileage) return '-';
    return `${mileage.toLocaleString()}km`;
  };

  const totalPages = Math.ceil(totalCount / 20);
  const localTotalPages = Math.ceil(localTotal / 20);
  const allCarsTotalPages = Math.ceil(allCarsTotal / 20);

  return (
    <div>
      <h1 className="text-2xl font-bold text-gray-800 mb-6">Cars Management</h1>

      {/* Tabs */}
      <div className="flex border-b border-gray-200 mb-6">
        <button
          onClick={() => setActiveTab('local')}
          className={`px-6 py-3 font-medium text-sm border-b-2 transition-colors ${
            activeTab === 'local'
              ? 'border-primary-600 text-primary-600'
              : 'border-transparent text-gray-500 hover:text-gray-700'
          }`}
        >
          Local Cars ({localTotal})
        </button>
        <button
          onClick={() => setActiveTab('all')}
          className={`px-6 py-3 font-medium text-sm border-b-2 transition-colors ${
            activeTab === 'all'
              ? 'border-primary-600 text-primary-600'
              : 'border-transparent text-gray-500 hover:text-gray-700'
          }`}
        >
          All Cars ({allCarsTotal})
        </button>
        <button
          onClick={() => setActiveTab('carmodoo')}
          className={`px-6 py-3 font-medium text-sm border-b-2 transition-colors ${
            activeTab === 'carmodoo'
              ? 'border-primary-600 text-primary-600'
              : 'border-transparent text-gray-500 hover:text-gray-700'
          }`}
        >
          Search Carmodoo
        </button>
      </div>

      {/* Local Cars Tab */}
      {activeTab === 'local' && (
        <div className="bg-white rounded-xl shadow-sm p-6">
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-lg font-semibold text-gray-800">
              Imported Cars ({localTotal} total)
            </h2>
            <button
              onClick={() => loadLocalCars(localPage)}
              disabled={localLoading}
              className="text-primary-600 hover:text-primary-700 flex items-center gap-1"
            >
              <svg className={`w-4 h-4 ${localLoading ? 'animate-spin' : ''}`} 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>
              Refresh
            </button>
          </div>

          {localLoading ? (
            <div className="flex justify-center py-12">
              <div className="w-8 h-8 border-4 border-primary-600 border-t-transparent rounded-full animate-spin"></div>
            </div>
          ) : localCars.length === 0 ? (
            <div className="text-center py-12">
              <div className="text-6xl mb-4">📦</div>
              <h3 className="text-lg font-medium text-gray-800 mb-2">No cars imported yet</h3>
              <p className="text-gray-500 mb-4">
                Go to the &quot;Search Carmodoo&quot; tab to find and import cars.
              </p>
              <button
                onClick={() => setActiveTab('carmodoo')}
                className="bg-primary-600 text-white px-4 py-2 rounded-lg hover:bg-primary-700"
              >
                Search Carmodoo
              </button>
            </div>
          ) : (
            <>
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b border-gray-200">
                      <th className="py-3 px-2 text-center text-sm font-medium text-gray-600">Display</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-600">Image</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-600">Car Name</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-600">Year</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-600">Mileage</th>
                      <th className="py-3 px-4 text-right text-sm font-medium text-gray-600">Original</th>
                      <th className="py-3 px-4 text-right text-sm font-medium text-gray-600">Margin</th>
                      <th className="py-3 px-4 text-right text-sm font-medium text-gray-600">Final Price</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-600">Fuel</th>
                      <th className="py-3 px-2 text-center text-sm font-medium text-gray-600">PDF</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-600">Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    {localCars.map((car) => {
                      const mainImage = getImageUrl(car.images?.find((img) => img.is_main)?.url || car.images?.[0]?.url);
                      return (
                        <tr
                          key={car.id}
                          className={`border-b border-gray-100 hover:bg-gray-50 cursor-pointer ${!car.is_displayed ? 'opacity-60' : ''}`}
                          onClick={() => handleCarClick(car)}
                        >
                          <td className="py-3 px-2 text-center">
                            <button
                              onClick={(e) => handleToggleDisplay(car, e)}
                              className={`w-10 h-6 rounded-full transition-colors relative ${
                                car.is_displayed ? 'bg-green-500' : 'bg-gray-300'
                              }`}
                            >
                              <span
                                className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${
                                  car.is_displayed ? 'left-5' : 'left-1'
                                }`}
                              />
                            </button>
                          </td>
                          <td className="py-3 px-4">
                            <div className="w-20 h-14 bg-gray-200 rounded overflow-hidden relative">
                              {mainImage ? (
                                <img
                                  src={mainImage}
                                  alt={car.car_name || 'Car'}
                                  className="w-full h-full object-cover"
                                  onError={(e) => {
                                    (e.target as HTMLImageElement).style.display = 'none';
                                  }}
                                />
                              ) : (
                                <div className="w-full h-full flex items-center justify-center text-gray-400">
                                  <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                  </svg>
                                </div>
                              )}
                            </div>
                          </td>
                          <td className="py-3 px-4">
                            <div className="font-medium text-gray-800">{car.car_name}</div>
                            <div className="text-sm text-gray-500">
                              {car.maker?.name} {car.model?.name}
                            </div>
                          </td>
                          <td className="py-3 px-4 text-gray-600">
                            {car.year}년 {car.month}월
                          </td>
                          <td className="py-3 px-4 text-gray-600">{formatMileage(car.mileage)}</td>
                          <td className="py-3 px-4 text-right text-gray-500">
                            {formatPrice(car.price_krw)}
                          </td>
                          <td className="py-3 px-4 text-right text-blue-600">
                            {car.margin_krw ? `+${formatPrice(car.margin_krw)}` : '-'}
                          </td>
                          <td className="py-3 px-4 text-right font-semibold text-primary-600">
                            {formatPrice(car.final_price_krw || car.price_krw)}
                          </td>
                          <td className="py-3 px-4 text-gray-600">{car.fuel}</td>
                          <td className="py-3 px-2 text-center">
                            {pdfStatus[car.id] ? (
                              <span className="px-2 py-1 text-xs rounded-full bg-green-100 text-green-700" title="PDF Available">
                                ✓
                              </span>
                            ) : (
                              <button
                                onClick={(e) => handleRegeneratePdf(car.id, e)}
                                disabled={regeneratingPdf === car.id}
                                className="px-2 py-1 text-xs rounded-full bg-red-100 text-red-700 hover:bg-red-200 disabled:opacity-50"
                                title="Click to generate PDF"
                              >
                                {regeneratingPdf === car.id ? (
                                  <span className="flex items-center gap-1">
                                    <svg className="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24">
                                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                                    </svg>
                                  </span>
                                ) : (
                                  '✗ Retry'
                                )}
                              </button>
                            )}
                          </td>
                          <td className="py-3 px-4">
                            <button
                              onClick={(e) => {
                                e.stopPropagation();
                                handleDeleteCar(car.id);
                              }}
                              className="text-red-600 hover:text-red-700"
                            >
                              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                              </svg>
                            </button>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>

              {/* Pagination */}
              {localTotalPages > 1 && (
                <div className="flex justify-center items-center gap-2 mt-6">
                  <button
                    onClick={() => loadLocalCars(localPage - 1)}
                    disabled={localPage === 1 || localLoading}
                    className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50"
                  >
                    Prev
                  </button>
                  <span className="px-4 text-gray-600">
                    Page {localPage} of {localTotalPages}
                  </span>
                  <button
                    onClick={() => loadLocalCars(localPage + 1)}
                    disabled={localPage === localTotalPages || localLoading}
                    className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50"
                  >
                    Next
                  </button>
                </div>
              )}
            </>
          )}
        </div>
      )}

      {/* All Cars Tab (Public View) */}
      {activeTab === 'all' && (
        <div className="bg-white rounded-xl shadow-sm p-6">
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-lg font-semibold text-gray-800">
              All Displayed Cars ({allCarsTotal} total)
            </h2>
            <button
              onClick={() => loadAllCars(allCarsPage)}
              disabled={allCarsLoading}
              className="text-primary-600 hover:text-primary-700 flex items-center gap-1"
            >
              <svg className={`w-4 h-4 ${allCarsLoading ? 'animate-spin' : ''}`} 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>
              Refresh
            </button>
          </div>

          <p className="text-sm text-gray-500 mb-4">
            This shows the cars that are visible to users (is_displayed = true). This is the same view as the public /cars page.
          </p>

          {allCarsLoading ? (
            <div className="flex justify-center py-12">
              <div className="w-8 h-8 border-4 border-primary-600 border-t-transparent rounded-full animate-spin"></div>
            </div>
          ) : allCars.length === 0 ? (
            <div className="text-center py-12">
              <div className="text-6xl mb-4">📦</div>
              <h3 className="text-lg font-medium text-gray-800 mb-2">No cars displayed to users</h3>
              <p className="text-gray-500">
                Go to the &quot;Local Cars&quot; tab and toggle the display switch to show cars.
              </p>
            </div>
          ) : (
            <>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                {allCars.map((car) => {
                  const mainImage = getImageUrl(car.images?.find((img) => img.is_main)?.url || car.images?.[0]?.url);
                  return (
                    <div
                      key={car.id}
                      className="border rounded-lg overflow-hidden hover:shadow-md transition cursor-pointer"
                      onClick={() => handleCarClick(car)}
                    >
                      <div className="relative h-40 bg-gray-100">
                        {mainImage ? (
                          <img
                            src={mainImage}
                            alt={car.car_name || 'Car'}
                            className="w-full h-full object-cover"
                            onError={(e) => {
                              (e.target as HTMLImageElement).style.display = 'none';
                            }}
                          />
                        ) : (
                          <div className="w-full h-full flex items-center justify-center text-gray-400">
                            <svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                          </div>
                        )}
                        {/* PDF Status Badge */}
                        <div className="absolute top-2 right-2">
                          {pdfStatus[car.id] ? (
                            <span className="px-2 py-1 text-xs rounded-full bg-green-500 text-white" title="PDF Available">
                              PDF
                            </span>
                          ) : (
                            <button
                              onClick={(e) => handleRegeneratePdf(car.id, e)}
                              disabled={regeneratingPdf === car.id}
                              className="px-2 py-1 text-xs rounded-full bg-red-500 text-white hover:bg-red-600 disabled:opacity-50"
                              title="Click to generate PDF"
                            >
                              {regeneratingPdf === car.id ? '...' : 'No PDF'}
                            </button>
                          )}
                        </div>
                      </div>
                      <div className="p-3">
                        <h3 className="font-medium text-gray-800 truncate">{car.car_name}</h3>
                        <p className="text-sm text-gray-500 mt-1">
                          {car.year}년 | {formatMileage(car.mileage)}
                        </p>
                        <p className="text-sm text-gray-500">
                          {car.fuel} | {car.transmission}
                        </p>
                        <p className="text-lg font-bold text-primary-600 mt-2">
                          {formatPrice(car.final_price_krw || car.price_krw)}
                        </p>
                      </div>
                    </div>
                  );
                })}
              </div>

              {/* Pagination */}
              {allCarsTotalPages > 1 && (
                <div className="flex justify-center items-center gap-2 mt-6">
                  <button
                    onClick={() => loadAllCars(allCarsPage - 1)}
                    disabled={allCarsPage === 1 || allCarsLoading}
                    className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50"
                  >
                    Prev
                  </button>
                  <span className="px-4 text-gray-600">
                    Page {allCarsPage} of {allCarsTotalPages}
                  </span>
                  <button
                    onClick={() => loadAllCars(allCarsPage + 1)}
                    disabled={allCarsPage === allCarsTotalPages || allCarsLoading}
                    className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50"
                  >
                    Next
                  </button>
                </div>
              )}
            </>
          )}
        </div>
      )}

      {/* Carmodoo Search Tab */}
      {activeTab === 'carmodoo' && (
        <>
          {/* Search Filters */}
          <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
            <h2 className="text-lg font-semibold text-gray-800 mb-4">Search from Carmodoo</h2>

            {/* First Row: Maker, Model, Car Type, Grade */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
              {/* Maker (제조사) */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Maker (제조사)
                </label>
                <select
                  value={filters.maker_code}
                  onChange={(e) => handleFilterChange('maker_code', e.target.value)}
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                >
                  <option value="">All Makers</option>
                  {makers.map((maker) => (
                    <option key={maker.code} value={maker.code}>
                      {maker.name}
                    </option>
                  ))}
                </select>
              </div>

              {/* Model (모델) */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Model (모델)
                </label>
                <select
                  value={filters.model_code}
                  onChange={(e) => handleFilterChange('model_code', e.target.value)}
                  disabled={!filters.maker_code}
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
                >
                  <option value="">All Models</option>
                  {models.map((model) => (
                    <option key={model.code} value={model.code}>
                      {model.name}
                    </option>
                  ))}
                </select>
              </div>

              {/* Grade (등급) */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Grade (등급)
                </label>
                <select
                  value={filters.grade}
                  onChange={(e) => handleFilterChange('grade', e.target.value)}
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                >
                  <option value="">All Grades</option>
                  {grades.map((grade) => (
                    <option key={grade.code} value={grade.code}>
                      {grade.name}
                    </option>
                  ))}
                </select>
              </div>
            </div>

            {/* Second Row: Year, Price */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
              {/* Year Range */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Year Min (연식)
                </label>
                <select
                  value={filters.year_min}
                  onChange={(e) => handleFilterChange('year_min', e.target.value)}
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                >
                  <option value="">Min</option>
                  {YEAR_OPTIONS.map((year) => (
                    <option key={year} value={year}>
                      {year}
                    </option>
                  ))}
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Year Max
                </label>
                <select
                  value={filters.year_max}
                  onChange={(e) => handleFilterChange('year_max', e.target.value)}
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                >
                  <option value="">Max</option>
                  {YEAR_OPTIONS.map((year) => (
                    <option key={year} value={year}>
                      {year}
                    </option>
                  ))}
                </select>
              </div>

              {/* Price Range (만원 단위) */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Price Min (가격, 만원)
                </label>
                <input
                  type="number"
                  value={filters.price_min}
                  onChange={(e) => handleFilterChange('price_min', e.target.value)}
                  placeholder="Min"
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Price Max
                </label>
                <input
                  type="number"
                  value={filters.price_max}
                  onChange={(e) => handleFilterChange('price_max', e.target.value)}
                  placeholder="Max"
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                />
              </div>
            </div>

            {/* Third Row: Mileage, Fuel, Displacement */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
              {/* Mileage */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Max Mileage (주행거리, km)
                </label>
                <input
                  type="number"
                  value={filters.mileage_max}
                  onChange={(e) => handleFilterChange('mileage_max', e.target.value)}
                  placeholder="e.g. 100000"
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                />
              </div>
              {/* Fuel Type */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Fuel Type (연료)
                </label>
                <select
                  value={filters.fuel}
                  onChange={(e) => handleFilterChange('fuel', e.target.value)}
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                >
                  {FUEL_TYPES.map((fuel) => (
                    <option key={fuel.value} value={fuel.value}>
                      {fuel.label}
                    </option>
                  ))}
                </select>
              </div>

              {/* Displacement Range */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Displacement Min (배기량, cc)
                </label>
                <select
                  value={filters.displacement_min}
                  onChange={(e) => handleFilterChange('displacement_min', e.target.value)}
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                >
                  <option value="">Min</option>
                  {[1000, 1500, 2000, 2500, 3000, 3500, 4000, 5000].map((cc) => (
                    <option key={cc} value={cc}>
                      {cc}cc
                    </option>
                  ))}
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Displacement Max
                </label>
                <select
                  value={filters.displacement_max}
                  onChange={(e) => handleFilterChange('displacement_max', e.target.value)}
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                >
                  <option value="">Max</option>
                  {[1000, 1500, 2000, 2500, 3000, 3500, 4000, 5000].map((cc) => (
                    <option key={cc} value={cc}>
                      {cc}cc
                    </option>
                  ))}
                </select>
              </div>
            </div>

            {/* Search Button */}
            <div className="flex justify-end">
              <button
                onClick={() => handleSearch(1)}
                disabled={loading}
                className="bg-primary-600 text-white px-6 py-2 rounded-lg hover:bg-primary-700 transition-colors disabled:opacity-50 flex items-center gap-2"
              >
                {loading ? (
                  <>
                    <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                    <span>Searching...</span>
                  </>
                ) : (
                  <>
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                    <span>Search</span>
                  </>
                )}
              </button>
            </div>
          </div>

          {/* Import Result */}
          {importResult && (
            <div className={`border rounded-xl p-4 mb-6 ${
              importResult.pdfFailed > 0
                ? 'bg-amber-50 border-amber-200'
                : 'bg-green-50 border-green-200'
            }`}>
              <div className="flex justify-between items-start">
                <div>
                  <h3 className={`font-semibold mb-2 ${
                    importResult.pdfFailed > 0 ? 'text-amber-800' : 'text-green-800'
                  }`}>
                    Import Complete
                  </h3>
                  <div className="text-gray-700 space-y-1">
                    <div>
                      <span className="mr-4">Imported: {importResult.imported}</span>
                      <span className="mr-4">Skipped: {importResult.skipped}</span>
                      {importResult.errors > 0 && (
                        <span className="text-red-600">Errors: {importResult.errors}</span>
                      )}
                    </div>
                    <div className="flex items-center gap-4 mt-2">
                      <span className="flex items-center gap-1">
                        <svg className="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                          <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                        </svg>
                        PDF Success: {importResult.pdfSuccess}
                      </span>
                      {importResult.pdfFailed > 0 && (
                        <span className="flex items-center gap-1 text-amber-700">
                          <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
                          </svg>
                          PDF Failed: {importResult.pdfFailed}
                        </span>
                      )}
                    </div>
                  </div>
                </div>
                <button
                  onClick={() => setImportResult(null)}
                  className="text-gray-400 hover:text-gray-600"
                >
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>

              {/* PDF 실패 상세 정보 */}
              {importResult.pdfFailed > 0 && importResult.pdfDetails && (
                <div className="mt-4 pt-4 border-t border-amber-200">
                  <h4 className="text-sm font-medium text-amber-800 mb-2">
                    PDF 생성 실패 차량 (3회 재시도 완료):
                  </h4>
                  <div className="space-y-2 max-h-40 overflow-y-auto">
                    {importResult.pdfDetails
                      .filter(d => !d.success)
                      .map((detail, idx) => (
                        <div key={idx} className="flex items-center justify-between text-sm bg-white rounded p-2">
                          <span className="text-gray-700">
                            [{detail.car_id}] {detail.car_name}
                          </span>
                          <span className="text-amber-600 text-xs">
                            {detail.attempts}회 시도 - {detail.error || 'Unknown error'}
                          </span>
                        </div>
                      ))}
                  </div>
                  <p className="mt-3 text-xs text-amber-700">
                    ⚠️ Local Cars 탭에서 해당 차량의 "PDF" 버튼을 클릭하여 수동으로 재시도할 수 있습니다.
                  </p>
                </div>
              )}
            </div>
          )}

          {/* Banner Registration Result */}
          {bannerResult && (
            <div className={`border rounded-xl p-4 mb-6 ${
              bannerResult.pdfFailed > 0
                ? 'bg-amber-50 border-amber-200'
                : 'bg-purple-50 border-purple-200'
            }`}>
              <div className="flex justify-between items-start">
                <div>
                  <h3 className={`font-semibold mb-2 ${
                    bannerResult.pdfFailed > 0 ? 'text-amber-800' : 'text-purple-800'
                  }`}>
                    Banner Registration Complete
                  </h3>
                  <div className="text-gray-700 space-y-1">
                    <div>
                      <span className="mr-4">Banners Created: {bannerResult.registered}</span>
                      <span className="mr-4">Cars Imported: {bannerResult.imported}</span>
                      <span className="mr-4">Skipped: {bannerResult.skipped}</span>
                      {bannerResult.errors > 0 && (
                        <span className="text-red-600">Errors: {bannerResult.errors}</span>
                      )}
                    </div>
                    <div className="flex items-center gap-4 mt-2">
                      <span className="flex items-center gap-1">
                        <svg className="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                          <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                        </svg>
                        PDF Success: {bannerResult.pdfSuccess}
                      </span>
                      {bannerResult.pdfFailed > 0 && (
                        <span className="flex items-center gap-1 text-amber-700">
                          <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
                          </svg>
                          PDF Failed: {bannerResult.pdfFailed}
                        </span>
                      )}
                    </div>
                  </div>
                </div>
                <button
                  onClick={() => setBannerResult(null)}
                  className="text-gray-400 hover:text-gray-600"
                >
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>

              {/* PDF 실패 상세 정보 */}
              {bannerResult.pdfFailed > 0 && bannerResult.pdfDetails && (
                <div className="mt-4 pt-4 border-t border-amber-200">
                  <h4 className="text-sm font-medium text-amber-800 mb-2">
                    PDF 생성 실패 차량 (3회 재시도 완료):
                  </h4>
                  <div className="space-y-2 max-h-40 overflow-y-auto">
                    {bannerResult.pdfDetails
                      .filter(d => !d.success)
                      .map((detail, idx) => (
                        <div key={idx} className="flex items-center justify-between text-sm bg-white rounded p-2">
                          <span className="text-gray-700">
                            [{detail.car_id}] {detail.car_name}
                          </span>
                          <span className="text-amber-600 text-xs">
                            {detail.attempts}회 시도 - {detail.error || 'Unknown error'}
                          </span>
                        </div>
                      ))}
                  </div>
                  <p className="mt-3 text-xs text-amber-700">
                    ⚠️ Local Cars 탭에서 해당 차량의 "PDF" 버튼을 클릭하여 수동으로 재시도할 수 있습니다.
                  </p>
                </div>
              )}
            </div>
          )}

          {/* Search Results */}
          {searched && (
            <div className="bg-white rounded-xl shadow-sm p-6">
              <div className="flex justify-between items-center mb-4">
                <h2 className="text-lg font-semibold text-gray-800">
                  Search Results ({totalCount} cars found)
                </h2>
                <div className="flex items-center gap-4">
                  <span className="text-sm text-gray-600">
                    {selectedCars.size} selected
                  </span>
                  <button
                    onClick={handleImport}
                    disabled={importing || registeringBanners || selectedCars.size === 0}
                    className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors disabled:opacity-50 flex items-center gap-2"
                  >
                    {importing ? (
                      <>
                        <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                        <span>Importing...</span>
                      </>
                    ) : (
                      <>
                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                        </svg>
                        <span>Import Selected</span>
                      </>
                    )}
                  </button>
                  <button
                    onClick={handleRegisterAsBanner}
                    disabled={importing || registeringBanners || selectedCars.size === 0}
                    className="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50 flex items-center gap-2"
                  >
                    {registeringBanners ? (
                      <>
                        <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                        <span>Registering...</span>
                      </>
                    ) : (
                      <>
                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                        <span>Register as Banner</span>
                      </>
                    )}
                  </button>
                </div>
              </div>

              {/* Table */}
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b border-gray-200">
                      <th className="py-3 px-4 text-left">
                        <input
                          type="checkbox"
                          checked={cars.length > 0 && selectedCars.size === cars.length}
                          onChange={handleSelectAll}
                          className="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                        />
                      </th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-600">Image</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-600">Car Name</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-600">Type/Grade</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-600">Year</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-600">Mileage</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-600">Price</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-600">Fuel</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-600">Status</th>
                      <th className="py-3 px-4 text-left text-sm font-medium text-gray-600">Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    {cars.map((car) => (
                      <tr
                        key={car.id}
                        className={`border-b border-gray-100 hover:bg-gray-50 cursor-pointer ${
                          selectedCars.has(car.id) ? 'bg-primary-50' : ''
                        }`}
                        onClick={() => handleSelectCar(car.id)}
                      >
                        <td className="py-3 px-4">
                          <input
                            type="checkbox"
                            checked={selectedCars.has(car.id)}
                            onChange={() => handleSelectCar(car.id)}
                            onClick={(e) => e.stopPropagation()}
                            className="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                          />
                        </td>
                        <td className="py-3 px-4">
                          <div className="w-20 h-14 bg-gray-200 rounded overflow-hidden relative">
                            {car.main_image ? (
                              <Image
                                src={car.main_image}
                                alt={car.car_name}
                                fill
                                className="object-cover"
                                onError={(e) => {
                                  (e.target as HTMLImageElement).style.display = 'none';
                                }}
                              />
                            ) : (
                              <div className="w-full h-full flex items-center justify-center text-gray-400">
                                <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                </svg>
                              </div>
                            )}
                          </div>
                        </td>
                        <td className="py-3 px-4">
                          <div className="font-medium text-gray-800">{car.car_name}</div>
                          <div className="text-sm text-gray-500">{car.car_number}</div>
                        </td>
                        <td className="py-3 px-4">
                          <div className="text-sm">
                            <span className="px-2 py-0.5 bg-blue-100 text-blue-700 rounded text-xs mr-1">
                              {car.car_type_name || car.car_type || '-'}
                            </span>
                            <span className="px-2 py-0.5 bg-purple-100 text-purple-700 rounded text-xs">
                              {car.grade_name || car.grade || '-'}
                            </span>
                          </div>
                        </td>
                        <td className="py-3 px-4 text-gray-600">
                          {car.year}년 {car.month}월
                        </td>
                        <td className="py-3 px-4 text-gray-600">{formatMileage(car.mileage)}</td>
                        <td className="py-3 px-4 font-semibold text-primary-600">
                          {formatPrice(car.price)}
                        </td>
                        <td className="py-3 px-4 text-gray-600">{car.fuel}</td>
                        <td className="py-3 px-4">
                          {(car.seize_count || 0) > 0 || (car.collateral_count || 0) > 0 ? (
                            <span className="px-2 py-1 bg-red-100 text-red-700 rounded text-xs">
                              Issues
                            </span>
                          ) : (
                            <span className="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">
                              Clean
                            </span>
                          )}
                        </td>
                        <td className="py-3 px-4">
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              handleEditDealerDescription(car);
                            }}
                            className={`px-2 py-1 text-xs rounded flex items-center gap-1 ${
                              editedDescriptions[car.id]
                                ? 'bg-green-100 text-green-700 hover:bg-green-200'
                                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                            }`}
                          >
                            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                            </svg>
                            {editedDescriptions[car.id] ? 'Edited' : 'Edit'}
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              {/* Pagination */}
              {totalPages > 1 && (
                <div className="flex justify-center items-center gap-2 mt-6">
                  <button
                    onClick={() => handleSearch(currentPage - 1)}
                    disabled={currentPage === 1 || loading}
                    className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50"
                  >
                    Prev
                  </button>
                  <span className="px-4 text-gray-600">
                    Page {currentPage} of {totalPages}
                  </span>
                  <button
                    onClick={() => handleSearch(currentPage + 1)}
                    disabled={currentPage === totalPages || loading}
                    className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50"
                  >
                    Next
                  </button>
                </div>
              )}

              {/* Empty State */}
              {cars.length === 0 && (
                <div className="text-center py-12 text-gray-500">
                  No cars found matching your criteria.
                </div>
              )}
            </div>
          )}

          {/* Initial State */}
          {!searched && (
            <div className="bg-white rounded-xl shadow-sm p-12 text-center">
              <div className="text-6xl mb-4">🔍</div>
              <h3 className="text-lg font-medium text-gray-800 mb-2">
                Search for Cars from Carmodoo
              </h3>
              <p className="text-gray-500">
                Use the filters above to search for cars, then select and import them to your local database.
              </p>
            </div>
          )}
        </>
      )}

      {/* Car Detail Modal */}
      {showDetailModal && selectedCar && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
            {/* Modal Header */}
            <div className="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center">
              <h2 className="text-xl font-bold text-gray-800">{selectedCar.car_name}</h2>
              <button
                onClick={closeDetailModal}
                className="text-gray-500 hover:text-gray-700"
              >
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            {/* Modal Content */}
            <div className="p-6">
              {/* Image Gallery */}
              <div className="mb-6">
                <div className="relative bg-gray-100 rounded-xl overflow-hidden" style={{ height: '400px' }}>
                  {selectedCar.images && selectedCar.images.length > 0 ? (
                    <>
                      <img
                        src={getImageUrl(selectedCar.images[currentImageIndex]?.url)}
                        alt={`${selectedCar.car_name} image ${currentImageIndex + 1}`}
                        className="w-full h-full object-contain"
                        onError={(e) => {
                          (e.target as HTMLImageElement).style.display = 'none';
                        }}
                      />
                      {/* Navigation Arrows */}
                      {selectedCar.images.length > 1 && (
                        <>
                          <button
                            onClick={prevImage}
                            className="absolute left-4 top-1/2 -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-70"
                          >
                            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                            </svg>
                          </button>
                          <button
                            onClick={nextImage}
                            className="absolute right-4 top-1/2 -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-70"
                          >
                            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                            </svg>
                          </button>
                          {/* Image Counter */}
                          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 bg-black bg-opacity-50 text-white px-3 py-1 rounded-full text-sm">
                            {currentImageIndex + 1} / {selectedCar.images.length}
                          </div>
                        </>
                      )}
                    </>
                  ) : (
                    <div className="w-full h-full flex items-center justify-center text-gray-400">
                      <div className="text-center">
                        <svg className="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                        <p className="mt-2">No images available</p>
                      </div>
                    </div>
                  )}
                </div>

                {/* Thumbnail Strip */}
                {selectedCar.images && selectedCar.images.length > 1 && (
                  <div className="flex gap-2 mt-4 overflow-x-auto pb-2">
                    {selectedCar.images.map((img, idx) => (
                      <button
                        key={img.id}
                        onClick={() => setCurrentImageIndex(idx)}
                        className={`flex-shrink-0 w-16 h-12 rounded-lg overflow-hidden border-2 ${
                          idx === currentImageIndex ? 'border-primary-600' : 'border-transparent'
                        }`}
                      >
                        <img
                          src={getImageUrl(img.url)}
                          alt={`Thumbnail ${idx + 1}`}
                          className="w-full h-full object-cover"
                          onError={(e) => {
                            (e.target as HTMLImageElement).style.display = 'none';
                          }}
                        />
                      </button>
                    ))}
                  </div>
                )}
              </div>

              {/* Car Details */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* Basic Info */}
                <div className="bg-gray-50 rounded-xl p-4">
                  <h3 className="font-semibold text-gray-800 mb-3">Basic Information</h3>
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-gray-600">Maker</span>
                      <span className="font-medium">{selectedCar.maker?.name || '-'}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Model</span>
                      <span className="font-medium">{selectedCar.model?.name || '-'}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Year</span>
                      <span className="font-medium">{selectedCar.year}년 {selectedCar.month}월</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Mileage</span>
                      <span className="font-medium">{formatMileage(selectedCar.mileage)}</span>
                    </div>
                  </div>
                </div>

                {/* Pricing Info */}
                <div className="bg-blue-50 rounded-xl p-4">
                  <h3 className="font-semibold text-gray-800 mb-3">Pricing</h3>
                  <div className="space-y-3">
                    <div className="flex justify-between items-center">
                      <span className="text-gray-600">Original Price</span>
                      <span className="font-medium">{formatPrice(selectedCar.price_krw)}</span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-gray-600">Korea Margin (한국 마진)</span>
                      <div className="flex items-center gap-2">
                        <input
                          type="number"
                          value={(selectedCar.margin_krw || 0) / 10000}
                          onChange={(e) => {
                            const marginValue = parseInt(e.target.value || '0') * 10000;
                            handleUpdateCar(selectedCar.id, { margin_krw: marginValue });
                          }}
                          className="w-24 px-2 py-1 border border-gray-300 rounded text-right"
                          min="0"
                          onClick={(e) => e.stopPropagation()}
                        />
                        <span className="text-gray-500">만원</span>
                      </div>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-gray-600">Mongolia Margin (몽골 마진)</span>
                      <div className="flex items-center gap-2">
                        <input
                          type="number"
                          value={(selectedCar.margin_mn || 0) / 10000}
                          onChange={(e) => {
                            const marginValue = parseInt(e.target.value || '0') * 10000;
                            handleUpdateCar(selectedCar.id, { margin_mn: marginValue });
                          }}
                          className="w-24 px-2 py-1 border border-gray-300 rounded text-right"
                          min="0"
                          onClick={(e) => e.stopPropagation()}
                        />
                        <span className="text-gray-500">만원</span>
                      </div>
                    </div>
                    <div className="border-t border-blue-200 pt-2 mt-2">
                      <div className="flex justify-between items-center">
                        <span className="text-gray-700 font-medium">Final Price (Korea)</span>
                        <span className="font-bold text-lg text-primary-600">
                          {formatPrice(selectedCar.final_price_krw || selectedCar.price_krw)}
                        </span>
                      </div>
                      <div className="flex justify-between items-center mt-1">
                        <span className="text-gray-700 font-medium">Final Price (Mongolia)</span>
                        <span className="font-bold text-lg text-green-600">
                          {formatPrice(selectedCar.final_price_mn || selectedCar.price_krw)}
                        </span>
                      </div>
                    </div>
                    <div className="flex justify-between items-center pt-2">
                      <span className="text-gray-600">Display to Users</span>
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          handleUpdateCar(selectedCar.id, { is_displayed: !selectedCar.is_displayed });
                        }}
                        className={`w-12 h-7 rounded-full transition-colors relative ${
                          selectedCar.is_displayed ? 'bg-green-500' : 'bg-gray-300'
                        }`}
                      >
                        <span
                          className={`absolute top-1 w-5 h-5 bg-white rounded-full transition-transform ${
                            selectedCar.is_displayed ? 'left-6' : 'left-1'
                          }`}
                        />
                      </button>
                    </div>
                  </div>
                </div>

                {/* Technical Info */}
                <div className="bg-gray-50 rounded-xl p-4">
                  <h3 className="font-semibold text-gray-800 mb-3">Technical Details</h3>
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-gray-600">Fuel</span>
                      <span className="font-medium">{selectedCar.fuel || '-'}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Transmission</span>
                      <span className="font-medium">{selectedCar.transmission || '-'}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Color</span>
                      <span className="font-medium">{selectedCar.color || '-'}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Displacement</span>
                      <span className="font-medium">{selectedCar.displacement ? `${selectedCar.displacement}cc` : '-'}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Car Number</span>
                      <span className="font-medium">{selectedCar.car_number || '-'}</span>
                    </div>
                  </div>
                </div>

                {/* Status Info */}
                <div className="bg-gray-50 rounded-xl p-4">
                  <h3 className="font-semibold text-gray-800 mb-3">Status</h3>
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-gray-600">Status</span>
                      <span className={`px-2 py-1 rounded text-xs ${
                        selectedCar.status === 'active'
                          ? 'bg-green-100 text-green-700'
                          : 'bg-gray-100 text-gray-700'
                      }`}>
                        {selectedCar.status}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Seize Count</span>
                      <span className={`font-medium ${(selectedCar.seize_count || 0) > 0 ? 'text-red-600' : ''}`}>
                        {selectedCar.seize_count || 0}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Collateral Count</span>
                      <span className={`font-medium ${(selectedCar.collateral_count || 0) > 0 ? 'text-red-600' : ''}`}>
                        {selectedCar.collateral_count || 0}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Created At</span>
                      <span className="font-medium">{new Date(selectedCar.created_at).toLocaleDateString()}</span>
                    </div>
                  </div>
                </div>

                {/* Source Info */}
                <div className="bg-gray-50 rounded-xl p-4">
                  <h3 className="font-semibold text-gray-800 mb-3">Source Info</h3>
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-gray-600">Source</span>
                      <span className="font-medium">{selectedCar.source}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Source ID</span>
                      <span className="font-medium text-sm">{selectedCar.source_id}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Dealer</span>
                      <span className="font-medium">{selectedCar.dealer_name || '-'}</span>
                    </div>
                  </div>
                </div>
              </div>

              {/* Dealer's Comment Section */}
              <div className="mt-6 bg-amber-50 border border-amber-200 rounded-xl p-4">
                <div className="flex items-center justify-between mb-3">
                  <h3 className="font-semibold text-amber-800">Dealer's Comment</h3>
                  {!editingComment && dealerComment && (
                    <div className="flex gap-2">
                      <button
                        onClick={handleEditComment}
                        className="text-sm px-3 py-1 bg-amber-600 text-white rounded hover:bg-amber-700"
                      >
                        Edit
                      </button>
                      {dealerComment.ko && (
                        <button
                          onClick={handleRegenerateTranslation}
                          disabled={savingComment}
                          className="text-sm px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
                        >
                          {savingComment ? 'Regenerating...' : 'Regenerate'}
                        </button>
                      )}
                    </div>
                  )}
                </div>

                {loadingComment ? (
                  <div className="flex justify-center py-4">
                    <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-amber-600"></div>
                  </div>
                ) : editingComment ? (
                  <div className="space-y-3">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Korean (Original)</label>
                      <textarea
                        value={editCommentData.ko}
                        onChange={(e) => setEditCommentData({ ...editCommentData, ko: e.target.value })}
                        className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm resize-none"
                        rows={3}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">English</label>
                      <textarea
                        value={editCommentData.en}
                        onChange={(e) => setEditCommentData({ ...editCommentData, en: e.target.value })}
                        className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm resize-none"
                        rows={3}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Mongolian</label>
                      <textarea
                        value={editCommentData.mn}
                        onChange={(e) => setEditCommentData({ ...editCommentData, mn: e.target.value })}
                        className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm resize-none"
                        rows={3}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Russian</label>
                      <textarea
                        value={editCommentData.ru}
                        onChange={(e) => setEditCommentData({ ...editCommentData, ru: e.target.value })}
                        className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm resize-none"
                        rows={3}
                      />
                    </div>
                    <div className="flex gap-2 justify-end">
                      <button
                        onClick={() => setEditingComment(false)}
                        className="px-3 py-1.5 border border-gray-300 text-gray-700 rounded hover:bg-gray-50"
                      >
                        Cancel
                      </button>
                      <button
                        onClick={handleSaveComment}
                        disabled={savingComment}
                        className="px-3 py-1.5 bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50"
                      >
                        {savingComment ? 'Saving...' : 'Save'}
                      </button>
                    </div>
                  </div>
                ) : dealerComment ? (
                  <div className="space-y-3">
                    {dealerComment.ko && (
                      <div>
                        <span className="text-xs font-medium text-gray-500 bg-gray-100 px-2 py-0.5 rounded">KO</span>
                        <p className="mt-1 text-sm text-gray-700 whitespace-pre-wrap">{dealerComment.ko}</p>
                      </div>
                    )}
                    {dealerComment.en && (
                      <div>
                        <span className="text-xs font-medium text-blue-600 bg-blue-50 px-2 py-0.5 rounded">EN</span>
                        <p className="mt-1 text-sm text-gray-700 whitespace-pre-wrap">{dealerComment.en}</p>
                      </div>
                    )}
                    {dealerComment.mn && (
                      <div>
                        <span className="text-xs font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded">MN</span>
                        <p className="mt-1 text-sm text-gray-700 whitespace-pre-wrap">{dealerComment.mn}</p>
                      </div>
                    )}
                    {dealerComment.ru && (
                      <div>
                        <span className="text-xs font-medium text-red-600 bg-red-50 px-2 py-0.5 rounded">RU</span>
                        <p className="mt-1 text-sm text-gray-700 whitespace-pre-wrap">{dealerComment.ru}</p>
                      </div>
                    )}
                    {!dealerComment.ko && !dealerComment.en && !dealerComment.mn && !dealerComment.ru && (
                      <p className="text-sm text-gray-400 italic">No dealer comment available</p>
                    )}
                  </div>
                ) : (
                  <p className="text-sm text-gray-400 italic">No dealer comment available</p>
                )}
              </div>

              {/* Actions */}
              <div className="mt-6 flex justify-end gap-3">
                <button
                  onClick={() => {
                    handleDeleteCar(selectedCar.id);
                  }}
                  className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 flex items-center gap-2"
                >
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                  </svg>
                  Delete
                </button>
                <button
                  onClick={closeDetailModal}
                  className="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300"
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Dealer Description Edit Modal */}
      {showDescEditModal && editingCar && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg max-w-3xl w-full mx-4 max-h-[90vh] overflow-y-auto">
            <div className="p-6">
              <div className="flex justify-between items-center mb-4">
                <h3 className="text-lg font-semibold">Edit Dealer Description</h3>
                <button
                  onClick={() => setShowDescEditModal(false)}
                  className="text-gray-500 hover:text-gray-700"
                >
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>

              <p className="text-sm text-gray-600 mb-4">{editingCar.car_name}</p>

              {loadingDesc ? (
                <div className="flex justify-center py-8">
                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                </div>
              ) : (
                <>
                  {/* Sensitive Info Summary */}
                  {sensitiveInfo && sensitiveInfo.total > 0 && (
                    <div className="mb-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
                      <div className="flex items-center gap-2 text-yellow-800">
                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                        </svg>
                        <span className="font-medium">Sensitive info detected:</span>
                        {sensitiveInfo.phones > 0 && <span className="px-2 py-0.5 bg-red-100 text-red-700 rounded text-xs">Phone: {sensitiveInfo.phones}</span>}
                        {sensitiveInfo.addresses > 0 && <span className="px-2 py-0.5 bg-amber-100 text-amber-700 rounded text-xs">Address: {sensitiveInfo.addresses}</span>}
                        {sensitiveInfo.others > 0 && <span className="px-2 py-0.5 bg-blue-100 text-blue-700 rounded text-xs">Other: {sensitiveInfo.others}</span>}
                      </div>
                    </div>
                  )}

                  {/* Original Text with Highlighting */}
                  <div className="mb-4">
                    <label className="block text-sm font-medium text-gray-700 mb-1">Original (Highlighted)</label>
                    <div
                      className="p-3 bg-gray-50 border rounded-lg text-sm whitespace-pre-wrap max-h-40 overflow-y-auto"
                      dangerouslySetInnerHTML={{ __html: highlightedDesc || originalDesc || '<span class="text-gray-400">No description</span>' }}
                    />
                  </div>

                  {/* Editable Text */}
                  <div className="mb-4">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Edited Description
                      <span className="text-gray-400 font-normal ml-2">(Remove or mask sensitive info)</span>
                    </label>
                    <textarea
                      value={editedDesc}
                      onChange={(e) => setEditedDesc(e.target.value)}
                      className="w-full p-3 border rounded-lg text-sm h-40 resize-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                      placeholder="Enter edited description..."
                    />
                  </div>

                  {/* Action Buttons */}
                  <div className="flex gap-2 justify-end">
                    <button
                      onClick={handleApplyMasked}
                      className="px-3 py-2 text-sm bg-gray-100 text-gray-700 rounded hover:bg-gray-200"
                    >
                      Apply Auto-Mask
                    </button>
                    <button
                      onClick={() => setEditedDesc('')}
                      className="px-3 py-2 text-sm bg-gray-100 text-gray-700 rounded hover:bg-gray-200"
                    >
                      Clear
                    </button>
                    <button
                      onClick={() => setShowDescEditModal(false)}
                      className="px-4 py-2 text-sm bg-gray-200 text-gray-800 rounded hover:bg-gray-300"
                    >
                      Cancel
                    </button>
                    <button
                      onClick={handleSaveEditedDescription}
                      className="px-4 py-2 text-sm bg-blue-600 text-white rounded hover:bg-blue-700"
                    >
                      Save
                    </button>
                  </div>
                </>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
