import { PhotoGuide } from './PhotoGuide';
import { useId, useRef, useState } from 'react';
import { fileToBase64, resizeAvatarImage, UndecodableImageError } from '../imageUtils';
import { hasConsent, setConsent } from '../storage';
import type { WidgetTranslations } from '../i18n';
import { CameraCapture, cameraSupportIssue } from './CameraCapture';

interface AvatarUploadProps {
  onAvatarSaved: (imageData: string) => void;
  onCancel?: () => void;
  t: WidgetTranslations['upload'];
  // Pre-existing saved avatar (e.g. a returning visitor routed back here only
  // to re-confirm consent). Seeding the preview from it opens the component
  // directly in the preview+consent state instead of forcing a new file pick.
  initialPreview?: string | null;
  titleOverride?: string;
  descriptionOverride?: string;
  privacyNoteOverride?: string;
  consentOverride?: string;
}

export function AvatarUpload({ onAvatarSaved, onCancel, t, initialPreview, titleOverride, descriptionOverride, privacyNoteOverride, consentOverride }: AvatarUploadProps) {
  const fileInputRef = useRef<HTMLInputElement>(null);
  const fileInputId = useId();
  const [preview, setPreview] = useState<string | null>(initialPreview ?? null);
  const [isProcessing, setIsProcessing] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [consented, setConsented] = useState(hasConsent());
  const [cameraOpen, setCameraOpen] = useState(false);
  const [photoSource, setPhotoSource] = useState<'upload' | 'camera' | null>(null);
  const cameraIssue = cameraSupportIssue();
  const isReusingSaved = preview !== null && preview === initialPreview;

  const processFile = async (file: File, source: 'upload' | 'camera') => {
    setError(null);

    try {
      setIsProcessing(true);
      const base64 = await fileToBase64(file);
      const resized = await resizeAvatarImage(base64);
      setPreview(resized);
      setPhotoSource(source);
    } catch (err) {
      // Refuse only when the image is genuinely undecodable; anything the
      // browser can decode is normalized and used.
      setError(err instanceof UndecodableImageError ? t.unreadableImage : t.processingFailed);
      console.error('Error processing image:', err);
    } finally {
      setIsProcessing(false);
    }
  };

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) void processFile(file, 'upload');
  };

  const handleCameraCapture = (file: File) => {
    setCameraOpen(false);
    void processFile(file, 'camera');
  };

  const handleUseUpload = () => {
    setCameraOpen(false);
    requestAnimationFrame(() => fileInputRef.current?.focus());
  };

  const handleConfirm = () => {
    // Consent is required before we ever generate an AI try-on from the shopper's photo.
    if (preview && consented) {
      onAvatarSaved(preview);
      // Reset file input for next upload
      if (fileInputRef.current) {
        fileInputRef.current.value = '';
      }
    }
  };

  const handleConsentChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const checked = e.target.checked;
    setConsented(checked);
    if (checked) {
      setConsent();
    }
  };

  const handleRetake = () => {
    setPreview(null);
    setError(null);
    setCameraOpen(photoSource === 'camera');
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();

    const files = e.dataTransfer.files;
    if (files.length > 0) {
      const file = files[0];
      // Simulate file input change event
      const event = {
        target: {
          files: { 0: file, length: 1 },
        },
      } as unknown as React.ChangeEvent<HTMLInputElement>;
      handleFileSelect(event);
    }
  };

  return (
    <div className="aisthetix-avatar-upload">
      <div className="aisthetix-avatar-upload-header">
        <h3>{isReusingSaved ? t.reuseTitle : titleOverride ?? t.title}</h3>
        {!isReusingSaved && <p>{descriptionOverride ?? t.description}</p>}
      </div>

      {error && <div className="aisthetix-error-message">{error}</div>}

      {!preview && cameraOpen ? (
        <CameraCapture
          t={t}
          onCapture={handleCameraCapture}
          onUseUpload={handleUseUpload}
        />
      ) : !preview ? (
        <>
        <PhotoGuide t={t.guide} />
        <div
          className="aisthetix-upload-area"
          onDragOver={handleDragOver}
          onDrop={handleDrop}
        >
          <input
            ref={fileInputRef}
            type="file"
            accept="image/*"
            onChange={handleFileSelect}
            className="aisthetix-file-input"
            id={fileInputId}
            disabled={isProcessing}
          />
          <label htmlFor={fileInputId} className="aisthetix-upload-label">
            {isProcessing ? (
              <div className="aisthetix-spinner" />
            ) : (
              <>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="aisthetix-upload-icon"
                >
                  <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
                  <polyline points="17 8 12 3 7 8" />
                  <line x1="12" y1="3" x2="12" y2="15" />
                </svg>
                <span>{t.clickOrDrag}</span>
                <span className="aisthetix-upload-hint">{t.fileHint}</span>
              </>
            )}
          </label>
        </div>
        <div className="aisthetix-camera-launch">
          {cameraIssue === null ? (
            <button
              type="button"
              className="aisthetix-btn aisthetix-btn-primary"
              disabled={isProcessing}
              onClick={() => setCameraOpen(true)}
            >
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" /><circle cx="12" cy="13" r="4" /></svg>
              {t.takePhoto}
            </button>
          ) : (
            <p className="aisthetix-camera-fallback" role="status">
              {cameraIssue === 'insecure' ? t.cameraInsecure : t.cameraUnavailable}
            </p>
          )}
          <button type="button" className="aisthetix-btn aisthetix-btn-secondary aisthetix-mobile-upload"
            disabled={isProcessing} onClick={() => fileInputRef.current?.click()}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M12 3v12m-5-7 5-5 5 5" /></svg>
            {t.uploadPhoto}
          </button>
        </div>
        </>
      ) : (
        <div className="aisthetix-preview-area">
          <div className="aisthetix-preview-frame">
          <img
            src={preview}
            alt={t.title}
            className="aisthetix-preview-image ph-no-capture"
          />
          {isReusingSaved && <button type="button" onClick={handleRetake} className="aisthetix-preview-change">{t.changePhoto}</button>}
          </div>
          <label className="aisthetix-consent">
            <input
              type="checkbox"
              checked={consented}
              onChange={handleConsentChange}
            />
            <span>{consentOverride ?? t.consent}</span>
          </label>
          <div className="aisthetix-preview-actions">
            {!isReusingSaved && <button
              type="button"
              onClick={handleRetake}
              className="aisthetix-btn aisthetix-btn-secondary"
            >
              {photoSource === 'camera' ? t.cameraRetry : t.chooseDifferent}
            </button>}
            <button
              type="button"
              onClick={handleConfirm}
              className="aisthetix-btn aisthetix-btn-primary"
              disabled={isProcessing || !consented}
            >
              {t.useThis}
            </button>
          </div>
        </div>
      )}

      {onCancel && !preview && (
        <button
          type="button"
          onClick={onCancel}
          className="aisthetix-btn aisthetix-btn-text aisthetix-upload-cancel"
        >
          {t.cancel}
        </button>
      )}

      <div className="aisthetix-privacy-note">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
          <path d="M7 11V7a5 5 0 0110 0v4" />
        </svg>
        <span>{privacyNoteOverride ?? t.privacyNote}</span>
      </div>
    </div>
  );
}