'use client';

import { nanoid } from 'nanoid';
import { useEffect, useRef, useState } from 'react';

import { Icon } from '../icons';
import { createMediaItem } from '../lib/media';
import { useGallery, useGalleryStoreApi } from '../store/context';
import type { Annotation, MediaItem } from '../types';
import { Annotations, type AnnotationTool } from './editor/Annotations';

type Mode = 'photo' | 'video';
type Facing = 'user' | 'environment';

const ANN_TOOLS: Array<{ tool: AnnotationTool; label: string; icon: 'check' | 'aspect' | 'chevron-right' | 'crop' | 'tag' | 'wand' }> = [
  { tool: 'select', label: 'Off', icon: 'check' },
  { tool: 'rect', label: 'Box', icon: 'aspect' },
  { tool: 'arrow', label: 'Arrow', icon: 'chevron-right' },
  { tool: 'double-arrow', label: 'Measure', icon: 'crop' },
  { tool: 'text', label: 'Text', icon: 'tag' },
  { tool: 'freehand', label: 'Draw', icon: 'wand' },
];
const ANN_COLORS = ['#ff3b30', '#ffd60a', '#34c759', '#0a84ff', '#ffffff'];

export function Camera() {
  const api = useGalleryStoreApi();
  const open = useGallery((s) => s.cameraOpen);
  const videoRef = useRef<HTMLVideoElement>(null);
  const streamRef = useRef<MediaStream | null>(null);
  const recorderRef = useRef<MediaRecorder | null>(null);
  const chunksRef = useRef<Blob[]>([]);
  const recordStartRef = useRef<number>(0);
  const locationRef = useRef<MediaItem['location']>(undefined);
  const deviceRef = useRef<{ label?: string; width?: number; height?: number }>({});

  const [mode, setMode] = useState<Mode>('photo');
  const [facing, setFacing] = useState<Facing>('environment');
  const [grid, setGrid] = useState(false);
  const [annTool, setAnnTool] = useState<AnnotationTool>('rect');
  const [annColor, setAnnColor] = useState('#ff3b30');
  const [annotations, setAnnotations] = useState<Annotation[]>([]);
  const [recording, setRecording] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [review, setReview] = useState<{ url: string; blob: Blob; kind: 'image' | 'video'; w: number; h: number } | null>(null);

  // Start / restart the camera stream when open or facing changes.
  useEffect(() => {
    if (!open) return;
    let cancelled = false;
    setError(null);
    (async () => {
      try {
        if (!navigator.mediaDevices?.getUserMedia) throw new Error('Camera API not available in this browser.');
        const stream = await navigator.mediaDevices.getUserMedia({
          video: { facingMode: facing, width: { ideal: 1920 }, height: { ideal: 1080 } },
          audio: true,
        }).catch(async () =>
          navigator.mediaDevices.getUserMedia({ video: { facingMode: facing } }),
        );
        if (cancelled) {
          stream.getTracks().forEach((t) => t.stop());
          return;
        }
        streamRef.current = stream;
        const track = stream.getVideoTracks()[0];
        const settings = track?.getSettings?.() ?? {};
        deviceRef.current = { label: track?.label || 'Web Camera', width: settings.width, height: settings.height };
        if (videoRef.current) {
          videoRef.current.srcObject = stream;
          await videoRef.current.play().catch(() => undefined);
        }
      } catch (e) {
        setError(
          e instanceof Error && e.name === 'NotAllowedError'
            ? 'Camera permission denied. Allow camera access and try again.'
            : 'Could not start the camera.',
        );
      }
    })();
    return () => {
      cancelled = true;
      stopStream();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open, facing]);

  // Prefetch location when the camera opens so a fix is ready by capture time.
  useEffect(() => {
    if (!open) return;
    let cancelled = false;
    void getCurrentLocation().then((loc) => {
      if (!cancelled && loc) locationRef.current = loc;
    });
    return () => {
      cancelled = true;
    };
  }, [open]);

  // Reset transient state when closing.
  useEffect(() => {
    if (!open) {
      setReview((r) => {
        if (r) URL.revokeObjectURL(r.url);
        return null;
      });
      setAnnotations([]);
      setRecording(false);
    }
  }, [open]);

  if (!open) return null;

  const stopStream = () => {
    streamRef.current?.getTracks().forEach((t) => t.stop());
    streamRef.current = null;
  };

  const close = () => {
    if (review) URL.revokeObjectURL(review.url);
    stopStream();
    api.getState().closeCamera();
  };

  const capturePhoto = () => {
    const video = videoRef.current;
    if (!video || !video.videoWidth) return;
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;
    // Mirror the front camera to match the on-screen preview.
    if (facing === 'user') {
      ctx.translate(canvas.width, 0);
      ctx.scale(-1, 1);
    }
    ctx.drawImage(video, 0, 0);
    canvas.toBlob(
      (blob) => {
        if (!blob) return;
        setReview({ url: URL.createObjectURL(blob), blob, kind: 'image', w: canvas.width, h: canvas.height });
      },
      'image/jpeg',
      0.92,
    );
  };

  const toggleRecord = () => {
    if (recording) {
      recorderRef.current?.stop();
      return;
    }
    const stream = streamRef.current;
    if (!stream) return;
    chunksRef.current = [];
    const types = ['video/webm;codecs=vp9,opus', 'video/webm;codecs=vp8,opus', 'video/webm', 'video/mp4'];
    const mimeType = types.find((t) => typeof MediaRecorder !== 'undefined' && MediaRecorder.isTypeSupported(t));
    const recorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined);
    recorder.ondataavailable = (e) => {
      if (e.data.size > 0) chunksRef.current.push(e.data);
    };
    recorder.onstop = () => {
      const blob = new Blob(chunksRef.current, { type: recorder.mimeType || 'video/webm' });
      const v = videoRef.current;
      setReview({
        url: URL.createObjectURL(blob),
        blob,
        kind: 'video',
        w: v?.videoWidth ?? 1280,
        h: v?.videoHeight ?? 720,
      });
      setRecording(false);
    };
    recorder.start();
    recorderRef.current = recorder;
    recordStartRef.current = Date.now();
    setRecording(true);
  };

  const usePhoto = async () => {
    if (!review) return;
    const now = Date.now();
    const id = nanoid(10);
    const location = locationRef.current ?? (await getCurrentLocation());
    const device = deviceRef.current;
    const exif: Record<string, string | number> = {
      Make: 'Web Camera',
      Model: device.label || 'Web Camera',
    };
    if (device.width && device.height) exif.Resolution = `${device.width}×${device.height}`;
    const duration =
      review.kind === 'video'
        ? Math.max(1, Math.round((Date.now() - recordStartRef.current) / 1000))
        : undefined;
    // Prefer the backend (Supabase Storage) for a durable URL; otherwise fall back
    // to a data URL (durable across reloads for BOTH photos and video). Only if that
    // fails do we keep the in-session object URL as a last resort.
    const uploaded = await api.getState().uploadBlob(id, review.blob);
    const src = uploaded ?? (await blobToDataUrl(review.blob).catch(() => review.url));
    const item: MediaItem = createMediaItem({
      id,
      src,
      name: `${review.kind === 'video' ? 'VID' : 'IMG'}_${formatStamp(now)}.${review.kind === 'video' ? 'webm' : 'jpg'}`,
      kind: review.kind,
      mime: review.kind === 'video' ? (review.blob.type || 'video/webm') : 'image/jpeg',
      bytes: review.blob.size,
      width: review.w,
      height: review.h,
      takenAt: now,
      source: 'camera',
      duration,
      location,
      exif,
      // Stamp who captured this (display identity) when the host supplies a user.
      uploadedBy: api.getState().config.currentUser,
      edits: annotations.length ? { adjustments: {}, annotations } : undefined,
    });
    api.getState().addMedia([item]);
    setReview(null);
    setAnnotations([]);
    close();
    api.getState().setView('library');
    // Auto object-detection (AIAnalyzer) will tag the new capture when an AI provider is configured.
  };

  const retake = () => {
    if (review) URL.revokeObjectURL(review.url);
    setReview(null);
    setAnnotations([]);
  };

  return (
    <div className="apg-camera" role="dialog" aria-modal="true" aria-label="Camera">
      <div className="apg-camera__bar">
        <button type="button" className="apg-iconbtn" aria-label="Close camera" onClick={close}>
          <Icon name="close" />
        </button>
        <div className="apg-segmented" role="tablist" style={{ margin: '0 auto' }}>
          {(['photo', 'video'] as Mode[]).map((m) => (
            <button
              key={m}
              type="button"
              className={['apg-segmented__item', mode === m ? 'apg-segmented__item--active' : ''].join(' ')}
              onClick={() => !recording && setMode(m)}
            >
              {m === 'photo' ? 'Photo' : 'Video'}
            </button>
          ))}
        </div>
        <button type="button" className={['apg-iconbtn', grid ? 'apg-iconbtn--on' : ''].join(' ')} aria-label="Grid" onClick={() => setGrid((g) => !g)}>
          <Icon name="aspect" />
        </button>
        <button type="button" className="apg-iconbtn" aria-label="Switch camera" onClick={() => setFacing((f) => (f === 'user' ? 'environment' : 'user'))}>
          <Icon name="rotate" />
        </button>
      </div>

      <div className="apg-camera__stage">
        {error ? (
          <div className="apg-camera__error">
            <Icon name="camera" size={42} />
            <p>{error}</p>
            <button type="button" className="apg-btn apg-btn--primary" onClick={() => setFacing((f) => f)}>
              Retry
            </button>
          </div>
        ) : review ? (
          <div className="apg-camera__preview">
            {review.kind === 'image' ? (
              <div style={{ position: 'relative', display: 'inline-flex', maxWidth: '100%', maxHeight: '78vh' }}>
                <img src={review.url} alt="Captured" />
                <Annotations
                  annotations={annotations}
                  editable
                  tool={annTool}
                  color={annColor}
                  onChange={setAnnotations}
                />
              </div>
            ) : (
              <video src={review.url} controls autoPlay loop />
            )}
          </div>
        ) : (
          <div className="apg-camera__videowrap" style={{ transform: facing === 'user' ? 'scaleX(-1)' : undefined }}>
            <video ref={videoRef} playsInline muted autoPlay />
            {grid ? <div className="apg-camera__grid" /> : null}
          </div>
        )}
      </div>

      {review?.kind === 'image' ? (
        <div className="apg-camera__markup">
          {ANN_TOOLS.map((t) => (
            <button
              key={t.tool}
              type="button"
              className={['apg-camera__tool', annTool === t.tool ? 'apg-camera__tool--active' : ''].join(' ')}
              onClick={() => setAnnTool(t.tool)}
            >
              <Icon name={t.icon} size={15} /> {t.label}
            </button>
          ))}
          <span style={{ width: 1, background: 'rgba(255,255,255,0.2)', margin: '0 4px' }} />
          {ANN_COLORS.map((c) => (
            <button
              key={c}
              type="button"
              aria-label={`Color ${c}`}
              onClick={() => setAnnColor(c)}
              className="apg-camera__swatch"
              style={{ background: c, outline: annColor === c ? '2px solid #fff' : 'none' }}
            />
          ))}
          <span style={{ width: 1, background: 'rgba(255,255,255,0.2)', margin: '0 4px' }} />
          <button
            type="button"
            className="apg-camera__tool"
            disabled={annotations.length === 0}
            onClick={() => setAnnotations((a) => a.slice(0, -1))}
          >
            <Icon name="rotate" size={15} /> Undo
          </button>
          <button
            type="button"
            className="apg-camera__tool"
            disabled={annotations.length === 0}
            onClick={() => setAnnotations([])}
          >
            <Icon name="trash" size={15} /> Clear
          </button>
        </div>
      ) : null}

      <div className="apg-camera__controls">
        {review ? (
          <>
            <button type="button" className="apg-btn" onClick={retake}>
              Retake
            </button>
            <button type="button" className="apg-btn apg-btn--primary" onClick={() => void usePhoto()}>
              Use {review.kind === 'video' ? 'Video' : 'Photo'}
            </button>
          </>
        ) : (
          <button
            type="button"
            className={['apg-camera__shutter', mode === 'video' ? 'apg-camera__shutter--video' : '', recording ? 'apg-camera__shutter--recording' : ''].join(' ')}
            aria-label={mode === 'video' ? (recording ? 'Stop recording' : 'Record') : 'Capture photo'}
            disabled={Boolean(error)}
            onClick={mode === 'photo' ? capturePhoto : toggleRecord}
          />
        )}
      </div>
    </div>
  );
}

function getCurrentLocation(): Promise<MediaItem['location'] | undefined> {
  return new Promise((resolve) => {
    if (typeof navigator === 'undefined' || !navigator.geolocation) return resolve(undefined);
    navigator.geolocation.getCurrentPosition(
      (pos) => resolve({ lat: pos.coords.latitude, lng: pos.coords.longitude }),
      () => resolve(undefined),
      { enableHighAccuracy: true, timeout: 10_000, maximumAge: 300_000 },
    );
  });
}

function blobToDataUrl(blob: Blob): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = () => reject(new Error('read failed'));
    reader.readAsDataURL(blob);
  });
}

function formatStamp(ms: number): string {
  const d = new Date(ms);
  const p = (n: number) => n.toString().padStart(2, '0');
  return `${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}_${p(d.getHours())}${p(d.getMinutes())}${p(d.getSeconds())}`;
}