const { useState, useRef } = React;

function UploadDataView() {
  const [file, setFile] = useState(null);
  const [tableName, setTableName] = useState('metabase');
  const [status, setStatus] = useState('idle');
  const [message, setMessage] = useState('');
  const [progress, setProgress] = useState(0);
  const fileInputRef = useRef(null);

  const handleUpload = async () => {
    if (!file) return;
    setStatus('uploading');
    setProgress(0);
    setMessage(`Memulai upload bertahap file ${file.name}...`);

    const CHUNK_SIZE = 5 * 1024 * 1024;
    const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
    const fileId = `${file.name.replace(/[^a-zA-Z0-9]/g, '_')}-${file.size}`;

    try {
      let uploadedChunks = [];
      try {
        const statusRes = await fetch(`/api/upload-status?fileId=${encodeURIComponent(fileId)}`);
        if (statusRes.ok) {
          const statusData = await statusRes.json();
          uploadedChunks = statusData.uploadedChunks || [];
        }
      } catch (e) {
        console.warn('Gagal mengecek status upload lama, melanjutkan upload dari awal:', e);
      }

      for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
        if (uploadedChunks.includes(chunkIndex)) {
          const currentProgress = Math.round(((chunkIndex + 1) / totalChunks) * 100);
          setProgress(currentProgress);
          continue;
        }

        const start = chunkIndex * CHUNK_SIZE;
        const end = Math.min(start + CHUNK_SIZE, file.size);
        const chunk = file.slice(start, end);

        const formData = new FormData();
        formData.append('chunk', chunk);
        formData.append('chunkIndex', chunkIndex);
        formData.append('totalChunks', totalChunks);
        formData.append('fileId', fileId);
        formData.append('fileName', file.name);
        formData.append('tableName', tableName);

        setMessage(`Mengunggah potongan ${chunkIndex + 1} dari ${totalChunks}...`);

        const response = await fetch('/api/upload-chunk', {
          method: 'POST',
          body: formData
        });

        const contentType = response.headers.get("content-type");
        if (!contentType || !contentType.includes("application/json")) {
          throw new Error(`Server Error (${response.status}): Terjadi kendala saat upload chunk.`);
        }

        const result = await response.json();
        if (!response.ok || !result.success) {
          throw new Error(result.message || 'Gagal mengunggah potongan file.');
        }

        const currentProgress = Math.round(((chunkIndex + 1) / totalChunks) * 100);
        setProgress(currentProgress);
      }

      setStatus('success');
      setMessage(`Sinkronisasi berhasil! File ${file.name} telah diproses ke tabel '${tableName}'.`);
      setFile(null);
      setProgress(0);

    } catch (error) {
      setStatus('error');
      setMessage(error.message);
      setProgress(0);
    }
  };

  const handleFileChange = (e) => {
    const selectedFile = e.target.files[0];
    if (selectedFile) {
      setFile(selectedFile);
      setStatus('idle');
      setMessage('');
      setProgress(0);
    }
  };

  return (
    <div className="w-full max-w-3xl mx-auto relative mt-2 md:mt-6">
      <div className="absolute -inset-0.5 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-3xl blur opacity-20"></div>
      <div className="relative bg-cardbg border border-slate-700/60 rounded-2xl md:rounded-3xl shadow-2xl p-5 md:p-10">
        <div className="flex flex-col md:flex-row items-start md:items-center space-y-4 md:space-y-0 md:space-x-4 mb-6 md:mb-8">
          <div className="w-12 h-12 md:w-14 md:h-14 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl md:rounded-2xl flex items-center justify-center shadow-lg shadow-blue-500/30">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 md:h-7 md:w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8-4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" /></svg>
          </div>
          <div><h1 className="text-xl md:text-2xl font-extrabold text-white tracking-tight">Data Synchronization</h1><p className="text-xs md:text-sm text-slate-400">Pusat Integrasi Data Enterprise (Resumable Chunked Upload)</p></div>
        </div>

        <div className="mb-5 md:mb-6">
          <label className="block text-xs md:text-sm font-semibold text-slate-300 mb-2">Pilih Tabel Database Tujuan</label>
          <div className="relative">
            <select className="w-full bg-slate-900/90 border border-slate-700 text-white rounded-xl py-3 px-4 text-sm md:text-base appearance-none focus:outline-none focus:ring-2 focus:ring-primary transition cursor-pointer" value={tableName} onChange={(e) => setTableName(e.target.value)}>
              <option value="metabase">1. Tabel Metabase (VA, Balance, History)</option>
              <option value="mutasi_062101001878303">2. Mutasi Bank - 062101001878303</option>
              <option value="mutasi_062101001879309">3. Mutasi Bank - 062101001879309</option>
              <option value="mutasi_062101001880300">4. Mutasi Bank - 062101001880300</option>
              <option value="mutasi_062101001881306">5. Mutasi Bank - 062101001881306</option>
              <option value="mutasi_062101001790301">6. Mutasi Bank - 062101001790301</option>
              <option value="mutasi_062101001877307">7. Mutasi Bank - 062101001877307</option>
              <option value="top_up_balance_b2x_va_transaction_h2h">8. [Top Up Balance] B2X VA Transaction - H2H</option>
              <option value="metabase_qris_bss">9. Tabel Metabase Qris BSS</option>
              <option value="settlement_qris_bss">10. Settlement Qris BSS</option>
            </select>
            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-slate-400"><svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg></div>
          </div>
        </div>

        <div className="border-2 border-dashed border-slate-700 hover:border-primary bg-slate-800/40 hover:bg-slate-800/80 rounded-xl md:rounded-2xl p-6 md:p-10 flex flex-col items-center justify-center cursor-pointer transition-all duration-300 mb-6 group text-center" onClick={() => fileInputRef.current.click()}>
          {file ? (<div><p className="text-sm md:text-lg font-bold text-white mb-1 break-all">{file.name}</p><span className="bg-primary/20 text-primary text-xs px-3 py-1 rounded-full font-semibold">{(file.size / (1024 * 1024)).toFixed(2)} MB</span></div>) : (<div><p className="text-sm md:text-base font-semibold text-slate-200">Klik atau sentuh area ini untuk unggah CSV</p><p className="text-xs md:text-sm text-slate-400 mt-1">Mendukung file besar hingga 1 GB (Resumable)</p></div>)}
          <input type="file" accept=".csv" className="hidden" ref={fileInputRef} onChange={handleFileChange} />
        </div>

        {status === 'uploading' && (
          <div className="space-y-2 mb-6">
            <div className="flex justify-between text-xs font-semibold text-blue-300">
              <span>{message}</span>
              <span>{progress}%</span>
            </div>
            <div className="w-full bg-slate-900 rounded-full h-2.5 overflow-hidden">
              <div className="bg-primary h-2.5 rounded-full transition-all duration-300" style={{ width: `${progress}%` }}></div>
            </div>
          </div>
        )}
        {status === 'success' && <div className="flex items-center space-x-3 bg-emerald-950/40 border border-emerald-800/50 text-emerald-400 p-3 md:p-4 rounded-xl mb-6"><span className="text-xs md:text-sm font-medium">{message}</span></div>}
        {status === 'error' && <div className="flex items-center space-x-3 bg-red-950/40 border border-red-800/50 text-red-400 p-3 md:p-4 rounded-xl mb-6"><span className="text-xs md:text-sm font-medium">{message}</span></div>}

        <button className="w-full bg-primary hover:bg-primaryhover disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold py-3 md:py-3.5 px-4 rounded-xl shadow-lg transition-all" onClick={handleUpload} disabled={!file || status === 'uploading'}>
          {status === 'uploading' ? 'Memproses Potongan File...' : 'Mulai Sinkronisasi'}
        </button>
      </div>
    </div>
  );
}

window.UploadDataView = UploadDataView;