import React, { useState, useMemo, useEffect } from 'react';
import { 
  Plus, 
  Trash2, 
  Edit2, 
  Download, 
  Copy, 
  Search, 
  Users, 
  Wallet, 
  MessageSquare, 
  Calendar,
  X,
  CheckCircle2,
  AlertCircle,
  Briefcase,
  MapPin,
  Heart,
  Languages
} from 'lucide-react';

const App = () => {
  // --- Đa ngôn ngữ / Multi-language configuration ---
  const [lang, setLang] = useState('vi'); // 'vi' or 'zh'

  const translations = {
    vi: {
      title: "Hệ Thống Báo Cáo CRM",
      subtitle: "Quản lý khách hàng chuyên nghiệp",
      reporterLabel: "Tên người thực hiện",
      reporterPlaceholder: "Nhập tên của bạn...",
      searchPlaceholder: "Tìm tên khách, phân loại...",
      copy: "Sao chép",
      download: "Tải file",
      stats: {
        total: "Tổng khách",
        deposited: "Đã nạp",
        responded: "Phản hồi",
        roles: "Vai trò",
        performance: "Hiệu suất"
      },
      form: {
        info: "Thông tin báo cáo",
        addTitle: "Thêm khách hàng",
        editTitle: "Chỉnh sửa khách hàng",
        name: "Tên khách hàng *",
        role: "Vai trò",
        responded: "Phản hồi hôm nay",
        type: "Phân loại khách",
        amount: "Tiền nạp",
        job: "Công việc",
        address: "Nơi ở",
        marital: "Hôn nhân",
        log: "Nhật ký hỗ trợ khách hàng...",
        status: "Tình trạng hiện tại",
        plan: "Dự tính ngày mai",
        submitAdd: "Thêm vào danh sách",
        submitEdit: "Cập nhật thông tin",
        yes: "Có phản hồi",
        no: "Không phản hồi"
      },
      table: {
        listTitle: "Danh sách báo cáo chi tiết",
        time: "Thời gian",
        clearAll: "Xóa tất cả",
        headCustomer: "Khách & Nguồn",
        headType: "Phân loại & Tiền",
        headLog: "Nhật ký & Dự định",
        headAction: "Thao tác",
        noData: "Chưa có dữ liệu khách hàng.",
        responded: "Phản hồi",
        silent: "Im lặng",
        tomorrow: "Dự định"
      },
      report: {
        header: "BÁO CÁO CÔNG VIỆC HÀNG NGÀY",
        reporter: "Người báo cáo",
        date: "Ngày báo cáo",
        summary: "TỔNG HỢP SỐ LIỆU",
        detail: "DANH SÁCH CHI TIẾT",
        depositedCount: "Tổng khách đã nạp tiền",
        respondedRatio: "Số khách phản hồi",
        bySource: "Chi tiết theo nguồn",
        assistant: "Trợ lý chăm",
        shareholder: "Cổ đông chăm",
        referral: "Khách giới thiệu"
      },
      msg: {
        nameReq: "Vui lòng nhập tên khách hàng!",
        updated: "Đã cập nhật thông tin khách hàng",
        added: "Đã thêm khách hàng mới",
        deleted: "Đã xóa khách hàng",
        cleared: "Đã xóa toàn bộ danh sách",
        copySuccess: "Đã sao chép báo cáo!",
        copyFail: "Không thể sao chép!",
        emptyList: "Danh sách đang trống!",
        nameReportReq: "Vui lòng nhập tên người báo cáo!"
      }
    },
    zh: {
      title: "CRM 报告系统",
      subtitle: "专业客户管理系统",
      reporterLabel: "报告人姓名",
      reporterPlaceholder: "请输入您的姓名...",
      searchPlaceholder: "搜索姓名、分类...",
      copy: "复制内容",
      download: "导出文件",
      stats: {
        total: "总客户数",
        deposited: "已充值",
        responded: "已回复",
        roles: "角色分配",
        performance: "回复率"
      },
      form: {
        info: "报告基本信息",
        addTitle: "添加新客户",
        editTitle: "编辑客户信息",
        name: "客户姓名 *",
        role: "来源角色",
        responded: "今日是否回复",
        type: "客户分类",
        amount: "充值金额",
        job: "职业",
        address: "居住地",
        marital: "婚姻状况",
        log: "今日沟通/支持记录...",
        status: "目前状态",
        plan: "明日计划",
        submitAdd: "添加到列表",
        submitEdit: "更新信息",
        yes: "已回复",
        no: "未回复"
      },
      table: {
        listTitle: "详细报告列表",
        time: "时间",
        clearAll: "清空全部",
        headCustomer: "客户与来源",
        headType: "分类与金额",
        headLog: "记录与计划",
        headAction: "操作",
        noData: "暂无客户数据。",
        responded: "已回复",
        silent: "未回复",
        tomorrow: "计划"
      },
      report: {
        header: "每日工作报告",
        reporter: "报告人",
        date: "报告日期",
        summary: "数据统计",
        detail: "详细列表",
        depositedCount: "总充值客户数",
        respondedRatio: "回复人数",
        bySource: "按来源详情",
        assistant: "助理负责",
        shareholder: "股东负责",
        referral: "客户推荐"
      },
      msg: {
        nameReq: "请输入客户姓名！",
        updated: "客户信息已更新",
        added: "已成功添加客户",
        deleted: "已删除客户",
        cleared: "列表已清空",
        copySuccess: "报告内容已复制！",
        copyFail: "复制失败！",
        emptyList: "列表为空！",
        nameReportReq: "请输入报告人姓名！"
      }
    }
  };

  const t = (key) => {
    const keys = key.split('.');
    let result = translations[lang];
    for (const k of keys) {
      if (result[k]) result = result[k];
      else return key;
    }
    return result;
  };

  // State
  const [reporterName, setReporterName] = useState('');
  const [customers, setCustomers] = useState([]);
  const [editId, setEditId] = useState(null);
  const [searchTerm, setSearchTerm] = useState('');
  const [notification, setNotification] = useState(null);
  
  const [formData, setFormData] = useState({
    role: 'Trợ lý',
    type: 'Khách nạp tiền',
    amount: '',
    responded: 'Có',
    name: '',
    job: '',
    finance: '',
    maritalStatus: '',
    address: '',
    supportLog: '',
    currentStatus: '',
    tomorrowPlan: ''
  });

  // Constants (Mapped per language)
  const getRoles = () => lang === 'vi' ? ['Trợ lý', 'Cổ đông', 'Người giới thiệu'] : ['助理', '股东', '推荐人'];
  const getCustomerTypes = () => lang === 'vi' ? [
    'Khách nạp tiền',
    'Khách nạp tiền nhưng rút hết',
    'Khách đăng ký chưa nạp tiền còn nói chuyện',
    'Khách đăng ký chưa nạp tiền nhưng không nói chuyện',
    'Khách đang chăm',
    'Khách có dự định nạp tiền'
  ] : [
    '已充值客户',
    '已充值但提空客户',
    '已注册未充值（沟通中）',
    '已注册未充值（无沟通）',
    '跟进中客户',
    '有充值意向客户'
  ];

  // Notification helper
  const showNotification = (message, type = 'success') => {
    setNotification({ message, type });
    setTimeout(() => setNotification(null), 3000);
  };

  // Handlers
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const addOrUpdateCustomer = (e) => {
    e.preventDefault();
    if (!formData.name.trim()) {
      showNotification(t('msg.nameReq'), "error");
      return;
    }

    if (editId) {
      setCustomers(customers.map(c => c.id === editId ? { ...formData, id: editId } : c));
      setEditId(null);
      showNotification(t('msg.updated'));
    } else {
      setCustomers([{ ...formData, id: Date.now() }, ...customers]);
      showNotification(t('msg.added'));
    }

    setFormData({
      role: lang === 'vi' ? 'Trợ lý' : '助理',
      type: lang === 'vi' ? 'Khách nạp tiền' : '已充值客户',
      amount: '',
      responded: 'Có',
      name: '', job: '', finance: '', maritalStatus: '', address: '', supportLog: '', currentStatus: '', tomorrowPlan: ''
    });
  };

  const startEdit = (c) => {
    setEditId(c.id);
    setFormData({ ...c });
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const deleteCustomer = (id) => {
    setCustomers(customers.filter(c => c.id !== id));
    showNotification(t('msg.deleted'), "info");
  };

  const clearAll = () => {
    if (customers.length === 0) return;
    setCustomers([]);
    showNotification(t('msg.cleared'), "info");
  };

  // Memoized stats
  const filteredCustomers = useMemo(() => {
    return customers.filter(c => 
      c.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      c.type.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [customers, searchTerm]);

  const stats = useMemo(() => {
    const total = customers.length;
    const respondedCount = customers.filter(c => c.responded === 'Có' || c.responded === '已回复').length;
    const depositedCount = customers.filter(c => c.type.includes('nạp tiền') || c.type.includes('充值')).length;

    return {
      total,
      respondedCount,
      depositedCount,
      assistant: customers.filter(c => c.role === 'Trợ lý' || c.role === '助理').length,
      shareholder: customers.filter(c => c.role === 'Cổ đông' || c.role === '股东').length,
      referral: customers.filter(c => c.role === 'Người giới thiệu' || c.role === '推荐人').length
    };
  }, [customers]);

  const generateReportText = () => {
    if (!reporterName) {
      showNotification(t('msg.nameReportReq'), "error");
      return null;
    }
    if (customers.length === 0) {
      showNotification(t('msg.emptyList'), "error");
      return null;
    }

    const tr = t('report');
    let text = `==========================================\n`;
    text += `${tr.header}\n`;
    text += `==========================================\n`;
    text += `${tr.reporter}: ${reporterName}\n`;
    text += `${tr.date}: ${new Date().toLocaleDateString(lang === 'vi' ? 'vi-VN' : 'zh-CN')}\n\n`;
    
    text += `${tr.summary}:\n`;
    text += `------------------------------------------\n`;
    text += `- ${t('stats.total')}: ${stats.total}\n`;
    text += `- ${tr.depositedCount}: ${stats.depositedCount}\n`;
    text += `- ${tr.respondedRatio}: ${stats.respondedCount} / ${stats.total}\n`;
    text += `- ${tr.bySource}:\n`;
    text += `  + ${tr.assistant}: ${stats.assistant}\n`;
    text += `  + ${tr.shareholder}: ${stats.shareholder}\n`;
    text += `  + ${tr.referral}: ${stats.referral}\n`;
    text += `------------------------------------------\n\n`;
    
    text += `${tr.detail}:\n`;
    text += `==========================================\n\n`;
    
    customers.forEach((c, index) => {
      text += `${index + 1}. ${t('form.name').replace(' *', '')}: ${c.name} (${c.role})\n`;
      text += `   - ${t('form.type')}: ${c.type}\n`;
      text += `   - ${t('form.amount')}: ${c.amount || '0'}\n`;
      text += `   - ${t('form.responded')}: ${c.responded}\n`;
      text += `   - ${t('table.headLog').split(' & ')[0]}: ${c.supportLog || '-'}\n`;
      text += `   - ${t('form.status')}: ${c.currentStatus || '-'}\n`;
      text += `   - ${t('form.plan')}: ${c.tomorrowPlan || '-'}\n`;
      text += `------------------------------------------\n`;
    });

    return text;
  };

  const exportReport = () => {
    const text = generateReportText();
    if (!text) return;
    const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    const prefix = lang === 'vi' ? 'BaoCao' : '工作报告';
    a.download = `${prefix}_${reporterName.replace(/\s+/g, '_')}_${new Date().toLocaleDateString('vi-VN').replace(/\//g, '-')}.txt`;
    a.click();
    URL.revokeObjectURL(url);
  };

  const copyToClipboard = () => {
    const text = generateReportText();
    if (!text) return;
    const textArea = document.createElement("textarea");
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.select();
    try {
      document.execCommand('copy');
      showNotification(t('msg.copySuccess'));
    } catch (err) {
      showNotification(t('msg.copyFail'), "error");
    }
    document.body.removeChild(textArea);
  };

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-900 pb-20">
      {/* Notifications */}
      {notification && (
        <div className={`fixed top-4 right-4 z-50 flex items-center gap-3 px-6 py-4 rounded-2xl shadow-2xl transition-all animate-bounce ${
          notification.type === 'error' ? 'bg-red-600 text-white' : 
          notification.type === 'info' ? 'bg-slate-800 text-white' : 'bg-green-600 text-white'
        }`}>
          {notification.type === 'error' ? <AlertCircle size={20} /> : <CheckCircle2 size={20} />}
          <span className="font-medium">{notification.message}</span>
        </div>
      )}

      {/* Header */}
      <nav className="bg-white border-b border-slate-200 sticky top-0 z-40">
        <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="bg-indigo-600 p-2 rounded-lg text-white">
              <Users size={20} />
            </div>
            <div className="hidden md:block">
              <span className="text-lg font-bold tracking-tight block leading-tight">{t('title')}</span>
              <span className="text-[10px] text-slate-400 font-bold uppercase tracking-widest">{t('subtitle')}</span>
            </div>
          </div>
          
          <div className="flex items-center gap-4 flex-1 max-w-md mx-4">
            <div className="relative w-full">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
              <input 
                type="text"
                placeholder={t('searchPlaceholder')}
                className="w-full pl-10 pr-4 py-2 bg-slate-100 border-transparent rounded-full text-sm focus:bg-white focus:ring-2 focus:ring-indigo-500 focus:outline-none transition-all"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
          </div>

          <div className="flex items-center gap-2">
            {/* Language Switcher */}
            <div className="flex bg-slate-100 p-1 rounded-lg mr-2">
              <button 
                onClick={() => setLang('vi')}
                className={`px-3 py-1 rounded-md text-[10px] font-black transition-all ${lang === 'vi' ? 'bg-white shadow-sm text-indigo-600' : 'text-slate-400'}`}
              >
                VN
              </button>
              <button 
                onClick={() => setLang('zh')}
                className={`px-3 py-1 rounded-md text-[10px] font-black transition-all ${lang === 'zh' ? 'bg-white shadow-sm text-indigo-600' : 'text-slate-400'}`}
              >
                中
              </button>
            </div>

            <button 
              onClick={copyToClipboard}
              className="p-2 text-slate-600 hover:bg-slate-100 rounded-full transition-colors md:px-4 md:rounded-lg md:text-sm md:font-semibold flex items-center gap-2"
              title={t('copy')}
            >
              <Copy size={18} />
              <span className="hidden lg:block">{t('copy')}</span>
            </button>
            <button 
              onClick={exportReport}
              className="p-2 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 shadow-md transition-all md:px-4 md:rounded-lg md:text-sm md:font-semibold flex items-center gap-2"
            >
              <Download size={18} />
              <span className="hidden lg:block">{t('download')}</span>
            </button>
          </div>
        </div>
      </nav>

      <main className="max-w-7xl mx-auto px-4 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
          
          {/* Sidebar / Form */}
          <div className="lg:col-span-4 space-y-6">
            <div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
              <h2 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4">{t('form.info')}</h2>
              <div className="space-y-1">
                <label className="text-sm font-semibold text-slate-700">{t('reporterLabel')}</label>
                <input 
                  type="text"
                  placeholder={t('reporterPlaceholder')}
                  className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none transition-all font-medium"
                  value={reporterName}
                  onChange={(e) => setReporterName(e.target.value)}
                />
              </div>
            </div>

            <div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
              <div className="flex justify-between items-center mb-6">
                <h2 className="text-sm font-bold text-slate-800 flex items-center gap-2">
                  {editId ? <Edit2 size={16} className="text-amber-500" /> : <Plus size={16} className="text-indigo-600" />}
                  {editId ? t('form.editTitle') : t('form.addTitle')}
                </h2>
                {editId && (
                  <button onClick={() => setEditId(null)} className="text-slate-400 hover:text-slate-600">
                    <X size={18} />
                  </button>
                )}
              </div>

              <form onSubmit={addOrUpdateCustomer} className="space-y-4">
                <input 
                  name="name" 
                  placeholder={t('form.name')} 
                  required 
                  value={formData.name} 
                  onChange={handleInputChange} 
                  className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none" 
                />
                
                <div className="grid grid-cols-2 gap-3">
                  <div className="space-y-1">
                    <label className="text-[10px] font-bold text-slate-400 uppercase ml-1">{t('form.role')}</label>
                    <select name="role" value={formData.role} onChange={handleInputChange} className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm outline-none">
                      {getRoles().map(r => <option key={r} value={r}>{r}</option>)}
                    </select>
                  </div>
                  <div className="space-y-1">
                    <label className="text-[10px] font-bold text-slate-400 uppercase ml-1">{t('form.responded')}</label>
                    <select name="responded" value={formData.responded} onChange={handleInputChange} className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm outline-none">
                      <option value={lang === 'vi' ? 'Có' : '已回复'}>{t('form.yes')}</option>
                      <option value={lang === 'vi' ? 'Không' : '未回复'}>{t('form.no')}</option>
                    </select>
                  </div>
                </div>

                <div className="space-y-1">
                  <label className="text-[10px] font-bold text-slate-400 uppercase ml-1">{t('form.type')}</label>
                  <select name="type" value={formData.type} onChange={handleInputChange} className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm outline-none">
                    {getCustomerTypes().map(t => <option key={t} value={t}>{t}</option>)}
                  </select>
                </div>

                <div className="grid grid-cols-2 gap-3">
                  <div className="relative">
                    <Wallet className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={14} />
                    <input name="amount" placeholder={t('form.amount')} value={formData.amount} onChange={handleInputChange} className="w-full pl-9 pr-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm outline-none" />
                  </div>
                  <div className="relative">
                    <Briefcase className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={14} />
                    <input name="job" placeholder={t('form.job')} value={formData.job} onChange={handleInputChange} className="w-full pl-9 pr-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm outline-none" />
                  </div>
                </div>

                <div className="grid grid-cols-2 gap-3">
                   <div className="relative">
                    <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={14} />
                    <input name="address" placeholder={t('form.address')} value={formData.address} onChange={handleInputChange} className="w-full pl-9 pr-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm outline-none" />
                  </div>
                  <div className="relative">
                    <Heart className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={14} />
                    <input name="maritalStatus" placeholder={t('form.marital')} value={formData.maritalStatus} onChange={handleInputChange} className="w-full pl-9 pr-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm outline-none" />
                  </div>
                </div>

                <textarea 
                  name="supportLog" 
                  placeholder={t('form.log')} 
                  rows="3" 
                  value={formData.supportLog} 
                  onChange={handleInputChange} 
                  className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm outline-none resize-none"
                ></textarea>

                <div className="space-y-3">
                  <div className="relative">
                    <AlertCircle className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={14} />
                    <input name="currentStatus" placeholder={t('form.status')} value={formData.currentStatus} onChange={handleInputChange} className="w-full pl-9 pr-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm outline-none" />
                  </div>
                  <div className="relative">
                    <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={14} />
                    <input name="tomorrowPlan" placeholder={t('form.plan')} value={formData.tomorrowPlan} onChange={handleInputChange} className="w-full pl-9 pr-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm outline-none" />
                  </div>
                </div>

                <button type="submit" className={`w-full py-3 rounded-xl font-bold shadow-lg transition-all active:scale-[0.98] flex items-center justify-center gap-2 ${
                  editId ? 'bg-amber-500 hover:bg-amber-600 text-white' : 'bg-indigo-600 hover:bg-indigo-700 text-white'
                }`}>
                  {editId ? <Edit2 size={18} /> : <Plus size={18} />}
                  {editId ? t('form.submitEdit') : t('form.submitAdd')}
                </button>
              </form>
            </div>
          </div>

          {/* Table & Stats */}
          <div className="lg:col-span-8 space-y-6">
            
            {/* Stats Dashboard */}
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
              <div className="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm">
                <p className="text-slate-400 text-[10px] font-bold uppercase tracking-wider mb-1">{t('stats.total')}</p>
                <div className="flex items-center gap-2">
                  <span className="text-2xl font-black text-slate-900">{stats.total}</span>
                  <Users className="text-slate-200" size={20} />
                </div>
              </div>
              <div className="bg-indigo-50 p-4 rounded-2xl border border-indigo-100 shadow-sm">
                <p className="text-indigo-500 text-[10px] font-bold uppercase tracking-wider mb-1">{t('stats.deposited')}</p>
                <div className="flex items-center gap-2">
                  <span className="text-2xl font-black text-indigo-700">{stats.depositedCount}</span>
                  <Wallet className="text-indigo-200" size={20} />
                </div>
              </div>
              <div className="bg-green-50 p-4 rounded-2xl border border-green-100 shadow-sm">
                <p className="text-green-600 text-[10px] font-bold uppercase tracking-wider mb-1">{t('stats.responded')}</p>
                <div className="flex items-center gap-2">
                  <span className="text-2xl font-black text-green-700">{stats.respondedCount}</span>
                  <MessageSquare className="text-green-200" size={20} />
                </div>
              </div>
              <div className="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm hidden sm:block">
                <p className="text-slate-400 text-[10px] font-bold uppercase tracking-wider mb-1">{t('stats.roles')}</p>
                <div className="text-[9px] font-bold text-slate-600">
                  <div>{lang === 'vi' ? 'Trợ lý' : '助理'}: {stats.assistant} | {lang === 'vi' ? 'Cổ đông' : '股东'}: {stats.shareholder}</div>
                  <div>{lang === 'vi' ? 'G.Thiệu' : '推荐'}: {stats.referral}</div>
                </div>
              </div>
              <div className="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-center items-center">
                <p className="text-slate-400 text-[10px] font-bold uppercase tracking-wider mb-1">{t('stats.performance')}</p>
                <span className="text-lg font-black text-indigo-600">
                  {stats.total > 0 ? Math.round((stats.respondedCount / stats.total) * 100) : 0}%
                </span>
              </div>
            </div>

            {/* List Container */}
            <div className="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
              <div className="px-6 py-4 bg-slate-900 text-white flex justify-between items-center">
                <div>
                  <h3 className="text-sm font-bold">{t('table.listTitle')}</h3>
                  <p className="text-[10px] text-slate-400 uppercase tracking-widest mt-0.5">{t('table.time')}: {new Date().toLocaleDateString(lang === 'vi' ? 'vi-VN' : 'zh-CN')}</p>
                </div>
                <button 
                  onClick={clearAll}
                  className="text-xs font-bold text-red-400 hover:text-red-300 transition-colors flex items-center gap-1.5"
                >
                  <Trash2 size={14} />
                  {t('table.clearAll')}
                </button>
              </div>

              <div className="overflow-x-auto">
                <table className="w-full text-left min-w-[700px]">
                  <thead>
                    <tr className="bg-slate-50 border-b border-slate-100 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                      <th className="px-6 py-4">{t('table.headCustomer')}</th>
                      <th className="px-6 py-4">{t('table.headType')}</th>
                      <th className="px-6 py-4">{t('table.headLog')}</th>
                      <th className="px-6 py-4 text-center">{t('table.headAction')}</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {filteredCustomers.length === 0 ? (
                      <tr>
                        <td colSpan="4" className="py-20 text-center">
                          <div className="flex flex-col items-center gap-3 text-slate-300">
                            <Users size={48} strokeWidth={1} />
                            <p className="italic text-sm">{t('table.noData')}</p>
                          </div>
                        </td>
                      </tr>
                    ) : (
                      filteredCustomers.map(c => (
                        <tr key={c.id} className="hover:bg-slate-50 transition-colors group">
                          <td className="px-6 py-4">
                            <div className="flex items-center gap-3">
                              <div className={`w-10 h-10 rounded-full flex items-center justify-center font-bold text-white shadow-sm ${
                                (c.responded === 'Có' || c.responded === '已回复') ? 'bg-indigo-500' : 'bg-slate-300'
                              }`}>
                                {c.name.charAt(0).toUpperCase()}
                              </div>
                              <div>
                                <div className="font-bold text-slate-900 text-sm">{c.name}</div>
                                <div className="flex items-center gap-2 mt-1">
                                  <span className="text-[10px] font-bold text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded uppercase">
                                    {c.role}
                                  </span>
                                  {(c.responded === 'Có' || c.responded === '已回复') ? (
                                    <span className="flex items-center gap-1 text-[10px] font-medium text-green-600 bg-green-50 px-1.5 py-0.5 rounded">
                                      <CheckCircle2 size={10} /> {t('table.responded')}
                                    </span>
                                  ) : (
                                    <span className="text-[10px] font-medium text-slate-400 bg-slate-100 px-1.5 py-0.5 rounded">
                                      {t('table.silent')}
                                    </span>
                                  )}
                                </div>
                              </div>
                            </div>
                          </td>
                          <td className="px-6 py-4">
                            <div className="text-xs font-semibold text-slate-700 max-w-[150px]">{c.type}</div>
                            <div className="mt-1 flex items-center gap-1 text-indigo-600 font-bold text-sm">
                              <Wallet size={12} />
                              {c.amount || '0'}
                            </div>
                          </td>
                          <td className="px-6 py-4">
                            <div className="max-w-xs text-xs text-slate-500 line-clamp-2 italic" title={c.supportLog}>
                              {c.supportLog || '...'}
                            </div>
                            <div className="mt-1.5 flex items-center gap-2">
                               <span className="text-[10px] font-bold text-slate-400 flex items-center gap-1">
                                <AlertCircle size={10} /> {c.currentStatus || '-'}
                               </span>
                               <span className="text-[10px] font-bold text-indigo-500 flex items-center gap-1">
                                <Calendar size={10} /> {t('table.tomorrow')}: {c.tomorrowPlan || '-'}
                               </span>
                            </div>
                          </td>
                          <td className="px-6 py-4">
                            <div className="flex justify-center items-center gap-1">
                              <button 
                                onClick={() => startEdit(c)}
                                className="p-2 text-slate-400 hover:text-amber-500 hover:bg-amber-50 rounded-lg transition-all"
                              >
                                <Edit2 size={16} />
                              </button>
                              <button 
                                onClick={() => deleteCustomer(c.id)}
                                className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-all"
                              >
                                <Trash2 size={16} />
                              </button>
                            </div>
                          </td>
                        </tr>
                      ))
                    )}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </main>

      {/* Mobile Actions */}
      <footer className="fixed bottom-0 left-0 right-0 bg-white border-t border-slate-200 py-3 px-4 md:hidden z-40">
        <div className="flex gap-3">
          <button 
            onClick={copyToClipboard}
            className="flex-1 bg-slate-800 text-white py-3 rounded-xl font-bold text-sm flex items-center justify-center gap-2"
          >
            <Copy size={16} /> {t('copy')}
          </button>
          <button 
            onClick={exportReport}
            className="flex-1 bg-indigo-600 text-white py-3 rounded-xl font-bold text-sm flex items-center justify-center gap-2"
          >
            <Download size={16} /> {t('download')}
          </button>
        </div>
      </footer>
    </div>
  );
};

export default App;