"use client";

import { useState, useRef } from "react";
import { useRouter } from "next/navigation";
import { useToastStore } from "@/lib/stores/toast-store";

export default function OnboardingPhotosPage() {
  const router = useRouter();
  const addToast = useToastStore((s) => s.addToast);
  const fileRef = useRef<HTMLInputElement>(null);
  const [photos, setPhotos] = useState<File[]>([]);
  const [previews, setPreviews] = useState<string[]>([]);
  const [uploading, setUploading] = useState(false);

  function handleFiles(e: React.ChangeEvent<HTMLInputElement>) {
    const files = Array.from(e.target.files || []);
    setPhotos((prev) => [...prev, ...files]);
    files.forEach((file) => {
      const reader = new FileReader();
      reader.onload = (ev) => {
        setPreviews((prev) => [...prev, ev.target?.result as string]);
      };
      reader.readAsDataURL(file);
    });
  }

  function removePhoto(index: number) {
    setPhotos((prev) => prev.filter((_, i) => i !== index));
    setPreviews((prev) => prev.filter((_, i) => i !== index));
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (photos.length === 0) {
      addToast("error", "Please upload at least one photo.");
      return;
    }
    setUploading(true);
    try {
      const formData = new FormData();
      photos.forEach((photo) => formData.append("photos", photo));
      const res = await fetch("/api/onboarding/photos", {
        method: "POST",
        body: formData,
      });
      if (!res.ok) throw new Error("Upload failed");
      router.push("/onboarding/video");
    } catch {
      addToast("error", "Failed to upload photos.");
    } finally {
      setUploading(false);
    }
  }

  return (
    <div className="max-w-2xl mx-auto">
      <div className="mb-8">
        <div className="flex items-center gap-2 text-sm text-text-muted mb-2">
          <span className="bg-primary text-white rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold">2</span>
          <span>Step 2 of 6</span>
        </div>
        <h1 className="text-3xl font-bold text-text">Profile Photos</h1>
        <p className="text-text-muted mt-1">Upload your best photos. You can add more later.</p>
      </div>

      <form onSubmit={handleSubmit} className="bg-surface rounded-lg p-6 space-y-5">
        <div
          onClick={() => fileRef.current?.click()}
          className="border-2 border-dashed border-surface-light rounded-lg p-8 text-center cursor-pointer hover:border-primary transition-colors"
        >
          <p className="text-text-muted">Click to select photos or drag and drop</p>
          <p className="text-xs text-text-muted mt-1">JPG, PNG up to 10MB each</p>
          <input
            ref={fileRef}
            type="file"
            accept="image/*"
            multiple
            className="hidden"
            onChange={handleFiles}
          />
        </div>

        {previews.length > 0 && (
          <div className="grid grid-cols-3 gap-3">
            {previews.map((src, i) => (
              <div key={i} className="relative group">
                <img src={src} alt={`Preview ${i + 1}`} className="w-full h-32 object-cover rounded-lg" />
                <button
                  type="button"
                  onClick={() => removePhoto(i)}
                  className="absolute top-1 right-1 bg-red-600 text-white rounded-full w-6 h-6 text-xs opacity-0 group-hover:opacity-100 transition-opacity"
                >
                  X
                </button>
              </div>
            ))}
          </div>
        )}

        <div className="flex justify-between pt-4">
          <button
            type="button"
            onClick={() => router.push("/onboarding/personal")}
            className="text-text-muted hover:text-text transition-colors"
          >
            Back
          </button>
          <button
            type="submit"
            disabled={uploading}
            className="bg-primary hover:bg-primary-dark text-white px-8 py-3 rounded-lg font-semibold transition-colors disabled:opacity-50"
          >
            {uploading ? "Uploading..." : "Next: Video"}
          </button>
        </div>
      </form>
    </div>
  );
}