// SelfieSheet — bottom-sheet modal asking user to upload a storefront selfie
// when they start or end work.

const { useState: useStateSheet, useRef: useRefSheet, useEffect: useEffectSheet } = React;

function SelfieSheet({ open, mode, onClose, onConfirm }) {
  // mode: 'start' | 'end' | null
  const [file, setFile] = useStateSheet(null);
  const [preview, setPreview] = useStateSheet(null);
  const fileRef = useRefSheet();

  useEffectSheet(() => {
    if (!open) {
      setFile(null);
      setPreview(null);
    }
  }, [open]);

  const pickFile = (f) => {
    if (!f) return;
    setFile(f);
    const url = URL.createObjectURL(f);
    setPreview(url);
  };

  const title = mode === 'end' ? 'سلفی پایان کار' : 'سلفی شروع کار';
  const subtitle = mode === 'end'
    ? 'برای ثبت پایان کار، یک سلفی با سردر فروشگاه آپلود کنید'
    : 'برای شروع کار، یک سلفی با سردر فروشگاه آپلود کنید';

  return (
    <>
      {/* backdrop */}
      <div
        onClick={onClose}
        style={{
          position: 'absolute', inset: 0,
          background: 'rgba(8,10,10,0.45)',
          opacity: open ? 1 : 0,
          pointerEvents: open ? 'auto' : 'none',
          transition: 'opacity 220ms ease',
          zIndex: 20,
        }}
      />
      {/* sheet */}
      <div style={{
        position: 'absolute',
        left: 0, right: 0, bottom: 0,
        background: 'var(--surface)',
        borderTopLeftRadius: 24, borderTopRightRadius: 24,
        padding: '12px 18px 22px',
        boxShadow: '0 -10px 40px rgba(0,0,0,0.18)',
        transform: open ? 'translateY(0)' : 'translateY(110%)',
        transition: 'transform 280ms cubic-bezier(.2,.8,.2,1)',
        zIndex: 21,
        direction: 'rtl',
      }}>
        {/* grabber */}
        <div style={{
          width: 44, height: 4, borderRadius: 99,
          background: 'var(--border)',
          margin: '0 auto 12px',
        }} />

        {/* header */}
        <div style={{
          display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
          marginBottom: 16, gap: 12,
        }}>
          <div>
            <div style={{ fontSize: 17, fontWeight: 700, color: 'var(--ink)', marginBottom: 4 }}>{title}</div>
            <div style={{ fontSize: 12.5, color: 'var(--muted)', lineHeight: 1.55 }}>{subtitle}</div>
          </div>
          <button onClick={onClose} style={{
            all: 'unset', cursor: 'pointer',
            width: 32, height: 32, borderRadius: 99,
            background: 'var(--icon-bg)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--ink)', flexShrink: 0,
          }}>
            <window.IconClose size={16} />
          </button>
        </div>

        {/* upload zone */}
        <input
          ref={fileRef}
          type="file"
          accept="image/*"
          capture="user"
          style={{ display: 'none' }}
          onChange={(e) => pickFile(e.target.files?.[0])}
        />

        {!preview ? (
          <button
            onClick={() => fileRef.current?.click()}
            style={{
              all: 'unset', cursor: 'pointer', width: '100%', boxSizing: 'border-box',
              border: '1.5px dashed var(--border)',
              borderRadius: 18,
              background: 'var(--icon-bg)',
              padding: '28px 16px',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
              textAlign: 'center',
            }}>
            <div style={{
              width: 56, height: 56, borderRadius: 16,
              background: 'var(--surface)',
              border: '1px solid var(--border)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'var(--accent)',
            }}>
              <window.IconCamera size={28} color="currentColor" />
            </div>
            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>
              برای گرفتن سلفی لمس کنید
            </div>
            <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>
              مطمئن شوید سردر فروشگاه در کادر باشد
            </div>
          </button>
        ) : (
          <div style={{
            borderRadius: 18, overflow: 'hidden',
            border: '1px solid var(--border)',
            background: 'var(--icon-bg)',
            aspectRatio: '4 / 3',
            position: 'relative',
          }}>
            <img src={preview} alt="selfie"
                 style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            <button
              onClick={() => { setFile(null); setPreview(null); fileRef.current.value = ''; fileRef.current?.click(); }}
              style={{
                all: 'unset', cursor: 'pointer',
                position: 'absolute', top: 10, right: 10,
                fontSize: 11.5, fontWeight: 600,
                color: '#fff', background: 'rgba(0,0,0,0.55)',
                padding: '6px 12px', borderRadius: 99,
                backdropFilter: 'blur(8px)',
              }}>
              تغییر عکس
            </button>
          </div>
        )}

        {/* actions */}
        <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
          <button onClick={onClose} style={{
            all: 'unset', cursor: 'pointer', flex: 1, textAlign: 'center',
            padding: '14px 16px', borderRadius: 14,
            background: 'var(--icon-bg)',
            color: 'var(--ink)', fontSize: 14, fontWeight: 600,
          }}>
            انصراف
          </button>
          <button
            disabled={!file}
            onClick={() => onConfirm(file)}
            style={{
              all: 'unset', cursor: file ? 'pointer' : 'not-allowed', flex: 2, textAlign: 'center',
              padding: '14px 16px', borderRadius: 14,
              background: file ? 'var(--accent)' : 'var(--icon-bg)',
              color: file ? '#fff' : 'var(--muted)',
              fontSize: 14, fontWeight: 700,
              transition: 'background 180ms ease',
            }}>
            {mode === 'end' ? 'ثبت پایان کار' : 'ثبت شروع کار'}
          </button>
        </div>
      </div>
    </>
  );
}

window.SelfieSheet = SelfieSheet;