CrazeAnalytix/components/FileUpload.tsx

import React, { ChangeEvent, useState } from 'react';
import { UploadIcon, MegaphoneIcon } from './Icons';

interface FileUploadProps {
  onSalesUpload: (file: File) => void;
  onAdsUpload: (file: File) => void;
  onTrafficUpload?: (file: File) => void;
  onVendorUpload?: (file: File) => void;
  onUrlSubmit: () => void;
  isLoading: boolean;
  activeUrl?: string | null;
  onDisconnect?: () => void;
  lastUpdated?: string | null;
}

const FileUpload: React.FC<FileUploadProps> = ({
  onSalesUpload,
  onAdsUpload,
  onTrafficUpload,
  onVendorUpload,
  onUrlSubmit,
  isLoading,
  activeUrl,
  onDisconnect,
  lastUpdated
}) => {
  const [url, setUrl] = useState('');

  const handleSalesChange = (e: ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      onSalesUpload(e.target.files[0]);
    }
  };

  const handleAdsChange = (e: ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      onAdsUpload(e.target.files[0]);
    }
  };

  const handleTrafficChange = (e: ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0 && onTrafficUpload) {
      onTrafficUpload(e.target.files[0]);
    }
  };

  const handleVendorChange = (e: ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0 && onVendorUpload) {
      onVendorUpload(e.target.files[0]);
    }
  };

  const handleUrlSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (url.trim()) {
      onUrlSubmit(url.trim());
    }
  };

  const handleSyncNow = () => {
    onUrlSubmit();
  };

  return (
    <div className="flex flex-col gap-6 p-2">

      {/* Active Connection Status */}
      {activeUrl && (
        <div className="bg-emerald-900/20 border border-emerald-500/30 rounded-xl p-6 text-center animate-fade-in">
          <div className="flex items-center justify-center gap-2 mb-2 text-emerald-400">
            <div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></div>
            <span className="font-bold text-sm uppercase tracking-wide">Cloud Sync Active</span>
          </div>
          <p className="text-slate-300 text-sm mb-1 truncate max-w-sm mx-auto opacity-80">{activeUrl}</p>
          {lastUpdated && <p className="text-xs text-slate-500 mb-4">Last updated: {new Date(lastUpdated).toLocaleString()}</p>}

          <div className="flex gap-3 justify-center">
            <button
              onClick={handleSyncNow}
              disabled={isLoading}
              className="px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-2 disabled:opacity-50"
            >
              {isLoading ? (
                <>
                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
                  Syncing...
                </>
              ) : (
                <>
                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" /></svg>
                  Sync Now
                </>
              )}
            </button>
            <button
              onClick={onDisconnect}
              className="px-4 py-2 bg-slate-800 hover:bg-red-900/30 text-slate-300 hover:text-red-400 border border-slate-700 hover:border-red-800 rounded-lg text-sm font-medium transition-colors"
            >
              Disconnect
            </button>
          </div>
        </div>
      )}

      {/* Manual File Uploads */}
      <div className="grid grid-cols-2 gap-4">
        <div className="rounded-xl border border-dashed border-slate-700 bg-slate-900/50 hover:bg-slate-900 transition-colors group h-full">
          <label htmlFor="sales-upload" className="cursor-pointer flex flex-col items-center justify-center gap-3 p-6 h-full">
            <div className="p-3 bg-indigo-500/10 rounded-full text-indigo-400 group-hover:scale-110 transition-transform">
              <UploadIcon />
            </div>
            <div className="text-center">
              <h3 className="font-semibold text-slate-200">Upload Sales CSV</h3>
              <p className="text-[10px] text-slate-500 mt-1">Standard Sales Data</p>
            </div>
            <input
              id="sales-upload"
              type="file"
              accept=".csv,.xlsx"
              onChange={handleSalesChange}
              disabled={isLoading}
              className="hidden"
            />
          </label>
        </div>

        <div className="rounded-xl border border-dashed border-slate-700 bg-slate-900/50 hover:bg-slate-900 transition-colors group h-full">
          <label htmlFor="ads-upload" className="cursor-pointer flex flex-col items-center justify-center gap-3 p-6 h-full">
            <div className="p-3 bg-fuchsia-500/10 rounded-full text-fuchsia-400 group-hover:scale-110 transition-transform">
              <MegaphoneIcon />
            </div>
            <div className="text-center">
              <h3 className="font-semibold text-slate-200">Upload Ads CSV</h3>
              <p className="text-[10px] text-slate-500 mt-1">Advertising Expenses</p>
            </div>
            <input
              id="ads-upload"
              type="file"
              accept=".csv,.xlsx"
              onChange={handleAdsChange}
              disabled={isLoading}
              className="hidden"
            />
          </label>
        </div>

        {onTrafficUpload && (
          <div className="rounded-xl border border-dashed border-slate-700 bg-slate-900/50 hover:bg-slate-900 transition-colors group h-full">
            <label htmlFor="traffic-upload" className="cursor-pointer flex flex-col items-center justify-center gap-3 p-6 h-full">
              <div className="p-3 bg-teal-500/10 rounded-full text-teal-400 group-hover:scale-110 transition-transform">
                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
                  <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                </svg>
              </div>
              <div className="text-center">
                <h3 className="font-semibold text-slate-200">Upload Traffic Excel</h3>
                <p className="text-[10px] text-slate-500 mt-1">Glance Views (GV) Data</p>
              </div>
              <input
                id="traffic-upload"
                type="file"
                accept=".xlsx,.xls"
                onChange={handleTrafficChange}
                disabled={isLoading}
                className="hidden"
              />
            </label>
          </div>
        )}

        {onVendorUpload && (
          <div className="rounded-xl border border-dashed border-slate-700 bg-slate-900/50 hover:bg-slate-900 transition-colors group h-full">
            <label htmlFor="vendor-upload" className="cursor-pointer flex flex-col items-center justify-center gap-3 p-6 h-full">
              <div className="p-3 bg-emerald-500/10 rounded-full text-emerald-400 group-hover:scale-110 transition-transform">
                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
                </svg>
              </div>
              <div className="text-center">
                <h3 className="font-semibold text-slate-200">Upload Vendor CSV</h3>
                <p className="text-[10px] text-slate-500 mt-1">BSR, Ratings, Buy Box</p>
              </div>
              <input
                id="vendor-upload"
                type="file"
                accept=".csv"
                onChange={handleVendorChange}
                disabled={isLoading}
                className="hidden"
              />
            </label>
          </div>
        )}
      </div>
    </div>
  );
};

export default FileUpload;