'use client';
import { ChangeEvent, FunctionComponent, useEffect, useRef, useState } from 'react';
import { useTranslations } from 'next-intl';
import Box from '@mui/material/Box';
import LinearProgress from '@mui/material/LinearProgress';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import AppButton from '../common/AppButton';
import AppIcon from '../common/AppIcon';
import { ACCEPTED_DOCUMENT_TYPES, MAX_DOCUMENT_SIZE_BYTES } from '@/services/verification/constants';

/** The stored document as the uploader displays it — a name + optional size, never bytes. */
export interface UploadedDocInfo {
  name: string;
  sizeBytes?: number;
}

type UploadState = 'idle' | 'uploading' | 'success' | 'error';

export interface DocumentUploadProps {
  /** Field label (already translated). */
  label: string;
  /** Optional helper text under the label. */
  hint?: string;
  /** Accepted MIME types. Defaults to jpg/png/pdf (the b6 object-storage limits). */
  accept?: readonly string[];
  /** Max file size in bytes. Defaults to 5 MB. */
  maxSizeBytes?: number;
  /** Mobile camera hint: `environment` (rear — ID card) or `user` (front — selfie). */
  capture?: 'user' | 'environment';
  disabled?: boolean;
  /**
   * The async upload action — receives the file + a progress reporter (0–100) and resolves with the
   * stored doc. For a server step this calls the verification seam; for a local capture (B4 identity) it
   * validates + resolves locally without a round-trip.
   */
  onUpload: (file: File, onProgress: (percent: number) => void) => Promise<UploadedDocInfo>;
  /** Called after a successful upload with the resolved metadata. */
  onUploaded?: (doc: UploadedDocInfo) => void;
  /** A previously-uploaded document (drives the "already uploaded ✓" state from server metadata). */
  existingDoc?: UploadedDocInfo | null;
  /** When the step was rejected — renders the reason and a re-upload affordance (never a dead end). */
  rejected?: boolean;
  rejectionReason?: string;
}

/**
 * Reusable document uploader for every verification document step (national-ID card, license, education
 * cert, criminal record). Owns the full state machine — idle → validating → uploading (progress %) →
 * success (✓ + file name / local image preview) → error (retry) — with client-side type/size validation
 * before any upload and a re-upload affordance on reject. Returns the server's stored **metadata** only;
 * a local image preview never becomes the source of the "uploaded" truth. Its own chrome strings come
 * from the `verification` namespace; the caller passes the field `label`/`hint`.
 * @component DocumentUpload
 */
const DocumentUpload: FunctionComponent<DocumentUploadProps> = ({
  label,
  hint,
  accept = ACCEPTED_DOCUMENT_TYPES,
  maxSizeBytes = MAX_DOCUMENT_SIZE_BYTES,
  capture,
  disabled = false,
  onUpload,
  onUploaded,
  existingDoc = null,
  rejected = false,
  rejectionReason,
}) => {
  const t = useTranslations('verification');
  const inputRef = useRef<HTMLInputElement>(null);

  const [state, setState] = useState<UploadState>('idle');
  const [progress, setProgress] = useState(0);
  const [errorKey, setErrorKey] = useState<string | null>(null);
  const [fileName, setFileName] = useState<string | null>(null);
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);

  // A local image preview is an object URL — revoke it when it changes or the component unmounts.
  useEffect(() => {
    return () => {
      if (previewUrl) URL.revokeObjectURL(previewUrl);
    };
  }, [previewUrl]);

  const openPicker = () => inputRef.current?.click();

  const onFileSelected = async (event: ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    event.target.value = ''; // allow re-picking the same file after an error
    if (!file) return;

    if (!accept.includes(file.type)) {
      setState('error');
      setErrorKey('upload_bad_type');
      return;
    }
    if (file.size > maxSizeBytes) {
      setState('error');
      setErrorKey('upload_too_large');
      return;
    }

    setErrorKey(null);
    setFileName(file.name);
    if (file.type.startsWith('image/')) {
      setPreviewUrl((prev) => {
        if (prev) URL.revokeObjectURL(prev);
        return URL.createObjectURL(file);
      });
    }
    setProgress(0);
    setState('uploading');

    try {
      const doc = await onUpload(file, setProgress);
      setFileName(doc.name);
      setState('success');
      onUploaded?.(doc);
    } catch {
      // 401/403/5xx are already toasted by the fetch layer; show a retryable inline error here.
      setState('error');
      setErrorKey('upload_error');
    }
  };

  const megabytes = Math.round(maxSizeBytes / (1024 * 1024));
  const acceptAttr = accept.join(',');
  // The "already uploaded" resting state is driven by server metadata (existingDoc) or a just-completed
  // upload — never by retained bytes.
  const showUploaded = state === 'success' || (state === 'idle' && existingDoc != null);
  const uploadedName = fileName ?? existingDoc?.name ?? '';

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
      <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
        {label}
      </Typography>
      {hint ? (
        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
          {hint}
        </Typography>
      ) : null}

      <input
        ref={inputRef}
        type="file"
        accept={acceptAttr}
        capture={capture}
        hidden
        disabled={disabled}
        onChange={onFileSelected}
      />

      {rejected ? (
        <Paper
          elevation={0}
          data-upload-state="rejected"
          sx={{
            p: 2,
            borderRadius: 2,
            border: '1px solid',
            borderColor: 'divider',
            borderInlineStartWidth: 4,
            borderInlineStartColor: 'var(--bal-error)',
            display: 'flex',
            flexDirection: 'column',
            gap: 1,
          }}
        >
          <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
            <AppIcon icon="rejected" size={20} color="var(--bal-error)" />
            <Typography variant="body2" sx={{ fontWeight: 700 }}>
              {t('upload_rejected')}
            </Typography>
          </Stack>
          {rejectionReason ? (
            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
              {rejectionReason}
            </Typography>
          ) : null}
          <AppButton
            variant="outlined"
            color="primary"
            startIcon="upload"
            onClick={openPicker}
            disabled={disabled}
            sx={{ m: 0, alignSelf: 'flex-start' }}
          >
            {t('upload_reupload')}
          </AppButton>
        </Paper>
      ) : state === 'uploading' ? (
        <Paper elevation={0} data-upload-state="uploading" sx={uploadedSx}>
          <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
            <AppIcon icon="upload" size={20} color="var(--bal-primary)" />
            <Typography variant="body2" sx={{ fontWeight: 600, flexGrow: 1, wordBreak: 'break-all' }}>
              {fileName}
            </Typography>
            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
              {progress}%
            </Typography>
          </Stack>
          <LinearProgress variant="determinate" value={progress} sx={{ borderRadius: 1, height: 6 }} />
          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
            {t('upload_uploading')}
          </Typography>
        </Paper>
      ) : showUploaded ? (
        <Paper elevation={0} data-upload-state="success" sx={uploadedSx}>
          <Stack direction="row" sx={{ gap: 1.5, alignItems: 'center' }}>
            {previewUrl ? (
              <Box
                component="img"
                src={previewUrl}
                alt=""
                sx={{ width: 48, height: 48, objectFit: 'cover', borderRadius: 1.5, flexShrink: 0 }}
              />
            ) : (
              <AppIcon icon="document" size={28} color="var(--bal-primary)" />
            )}
            <Stack sx={{ gap: 0.25, flexGrow: 1, minWidth: 0 }}>
              <Typography variant="body2" sx={{ fontWeight: 600, wordBreak: 'break-all' }}>
                {uploadedName}
              </Typography>
              <Stack direction="row" sx={{ gap: 0.5, alignItems: 'center' }}>
                <AppIcon icon="verified" size={16} color="var(--bal-success)" />
                <Typography variant="caption" sx={{ color: 'var(--bal-success)' }}>
                  {t('upload_success')}
                </Typography>
              </Stack>
            </Stack>
            <AppButton variant="text" color="primary" onClick={openPicker} disabled={disabled} sx={{ m: 0 }}>
              {t('upload_change')}
            </AppButton>
          </Stack>
        </Paper>
      ) : state === 'error' ? (
        <Paper
          elevation={0}
          data-upload-state="error"
          sx={{ ...uploadedSx, borderInlineStartWidth: 4, borderInlineStartColor: 'var(--bal-error)' }}
        >
          <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
            <AppIcon icon="error" size={20} color="var(--bal-error)" />
            <Typography variant="body2" sx={{ color: 'var(--bal-error)', flexGrow: 1 }}>
              {t(errorKey ?? 'upload_error', { size: megabytes })}
            </Typography>
          </Stack>
          <AppButton
            variant="outlined"
            color="primary"
            startIcon="refresh"
            onClick={openPicker}
            disabled={disabled}
            sx={{ m: 0, alignSelf: 'flex-start' }}
          >
            {t('upload_retry')}
          </AppButton>
        </Paper>
      ) : (
        <Box
          role="button"
          tabIndex={disabled ? -1 : 0}
          data-upload-state="idle"
          onClick={disabled ? undefined : openPicker}
          onKeyDown={(event) => {
            if (!disabled && (event.key === 'Enter' || event.key === ' ')) {
              event.preventDefault();
              openPicker();
            }
          }}
          sx={{
            p: 3,
            borderRadius: 2,
            border: '1px dashed',
            borderColor: 'divider',
            textAlign: 'center',
            cursor: disabled ? 'default' : 'pointer',
            opacity: disabled ? 0.6 : 1,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: 0.75,
            transition: 'border-color 120ms',
            '&:hover': disabled ? undefined : { borderColor: 'var(--bal-primary)' },
          }}
        >
          <AppIcon icon={capture ? 'camera' : 'upload'} size={28} color="var(--bal-primary)" />
          <Typography variant="body2" sx={{ fontWeight: 600 }}>
            {capture ? t('upload_capture') : t('upload_choose')}
          </Typography>
          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
            {t('upload_size_hint', { size: megabytes })}
          </Typography>
        </Box>
      )}
    </Box>
  );
};

// Shared card styling for the uploading / success / error states.
const uploadedSx = {
  p: 2,
  borderRadius: 2,
  border: '1px solid',
  borderColor: 'divider',
  display: 'flex',
  flexDirection: 'column',
  gap: 1,
} as const;

export default DocumentUpload;