'use client';

import React, { useState } from 'react';
import { Upload, Video, CheckCircle2, AlertCircle, Loader2, FileVideo } from 'lucide-react';
import { apiRequest } from '@/lib/api';

interface S3VideoUploaderProps {
  onUploadComplete: (result: { fileKey: string; fileUrl: string; filename: string }) => void;
  category?: string;
}

export default function S3VideoUploader({
  onUploadComplete,
  category = 'lessons-videos',
}: S3VideoUploaderProps) {
  const [file, setFile] = useState<File | null>(null);
  const [uploading, setUploading] = useState(false);
  const [uploadProgress, setUploadProgress] = useState<number>(0);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [successResult, setSuccessResult] = useState<{ fileKey: string; fileUrl: string } | null>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      const selectedFile = e.target.files[0];
      setFile(selectedFile);
      setErrorMessage(null);
      setSuccessResult(null);
    }
  };

  const handleUpload = async () => {
    if (!file) {
      setErrorMessage('Please select a lesson video file first.');
      return;
    }

    setUploading(true);
    setUploadProgress(5);
    setErrorMessage(null);

    try {
      // Step 1: Request S3 PutObject presigned URL from backend
      const presignedRes = await apiRequest('/upload/presigned-url', {
        method: 'POST',
        body: JSON.stringify({
          filename: file.name,
          fileType: file.type || 'video/mp4',
          category,
        }),
      });

      if (!presignedRes.success || !presignedRes.uploadUrl) {
        throw new Error(presignedRes.error || 'Failed to obtain S3 presigned upload URL from server');
      }

      setUploadProgress(25);

      // Step 2: Perform direct XHR / Fetch upload to S3 using Presigned URL
      const xhr = new XMLHttpRequest();

      xhr.upload.onprogress = (event) => {
        if (event.lengthComputable) {
          const percent = Math.round(25 + (event.loaded / event.total) * 70);
          setUploadProgress(percent);
        }
      };

      await new Promise<void>((resolve, reject) => {
        xhr.open('PUT', presignedRes.uploadUrl, true);
        xhr.setRequestHeader('Content-Type', file.type || 'video/mp4');

        xhr.onload = () => {
          if (xhr.status === 200 || xhr.status === 204) {
            resolve();
          } else {
            reject(new Error(`S3 Upload failed with status ${xhr.status}`));
          }
        };

        xhr.onerror = () => reject(new Error('Network error during direct S3 video upload.'));
        xhr.send(file);
      });

      setUploadProgress(100);
      setUploading(false);

      const resultData = {
        fileKey: presignedRes.fileKey,
        fileUrl: presignedRes.fileUrl,
        filename: file.name,
      };

      setSuccessResult(resultData);
      onUploadComplete(resultData);
    } catch (err: any) {
      setUploading(false);
      setUploadProgress(0);
      setErrorMessage(err.message || 'Video upload failed. Please try again.');
    }
  };

  return (
    <div className="p-6 rounded-2xl bg-white border border-gray-200 shadow-xs space-y-4">
      <div className="flex items-center gap-3 border-b border-gray-100 pb-3">
        <div className="w-9 h-9 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center border border-amber-200">
          <Video className="w-5 h-5" />
        </div>
        <div>
          <h4 className="font-extrabold text-sm text-gray-900">AWS S3 Direct Video Uploader</h4>
          <p className="text-xs text-gray-500">Secure client-to-S3 presigned upload for course lesson videos</p>
        </div>
      </div>

      {errorMessage && (
        <div className="p-3 rounded-xl bg-red-50 border border-red-200 text-red-700 text-xs font-semibold flex items-center gap-2">
          <AlertCircle className="w-4 h-4 text-red-600 shrink-0" />
          <span>{errorMessage}</span>
        </div>
      )}

      {successResult && (
        <div className="p-3.5 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-900 text-xs space-y-1">
          <div className="flex items-center gap-1.5 font-extrabold text-emerald-800">
            <CheckCircle2 className="w-4 h-4 text-emerald-600" />
            <span>Video Uploaded Directly to AWS S3!</span>
          </div>
          <p className="font-mono text-[11px] text-emerald-700 truncate">Key: {successResult.fileKey}</p>
        </div>
      )}

      <div className="space-y-3">
        <label className="block text-xs font-bold text-gray-700">Select Lesson Video File</label>
        <div className="flex items-center gap-3">
          <input
            type="file"
            accept="video/*"
            disabled={uploading}
            onChange={handleFileChange}
            className="block w-full text-xs text-gray-500 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-extrabold file:bg-amber-100 file:text-amber-900 hover:file:bg-amber-200 cursor-pointer"
          />
        </div>

        {file && (
          <div className="p-3 rounded-xl bg-gray-50 border border-gray-200 flex items-center justify-between text-xs">
            <span className="font-bold text-gray-800 truncate flex items-center gap-1.5">
              <FileVideo className="w-4 h-4 text-amber-600 shrink-0" />
              {file.name}
            </span>
            <span className="text-gray-500 font-mono text-[11px]">
              {(file.size / (1024 * 1024)).toFixed(2)} MB
            </span>
          </div>
        )}

        {uploading && (
          <div className="space-y-1.5 pt-1">
            <div className="flex justify-between text-xs font-bold text-gray-700">
              <span>Uploading directly to S3...</span>
              <span>{uploadProgress}%</span>
            </div>
            <div className="w-full bg-gray-200 rounded-full h-2.5 overflow-hidden">
              <div
                className="bg-[#FFC700] h-2.5 rounded-full transition-all duration-300"
                style={{ width: `${uploadProgress}%` }}
              />
            </div>
          </div>
        )}

        <button
          type="button"
          disabled={!file || uploading}
          onClick={handleUpload}
          className="w-full py-3.5 rounded-xl bg-[#FFC700] hover:bg-black text-black hover:text-[#FFC700] font-extrabold text-xs uppercase tracking-wider transition cursor-pointer disabled:opacity-50 flex items-center justify-center gap-2"
        >
          {uploading ? (
            <>
              <Loader2 className="w-4 h-4 animate-spin" />
              <span>Uploading to S3 ({uploadProgress}%)...</span>
            </>
          ) : (
            <>
              <Upload className="w-4 h-4" />
              <span>Upload Video via Presigned URL</span>
            </>
          )}
        </button>
      </div>
    </div>
  );
}