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;
  onUrlSubmit: () => void;  // Changed: no longer takes URL parameter
  isLoading: boolean;
  activeUrl?: string | null;
  onDisconnect?: () => void;
  lastUpdated?: string | null;
}

const FileUpload: React.FC<FileUploadProps> = ({
  onSalesUpload,
  onAdsUpload,
  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 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>
      </div>
    </div>
  );
};

export default FileUpload;