"use client";

import { useState } from "react";
import Image from "next/image";
import { Film, Lock, Eye, EyeOff } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Montserrat } from "next/font/google";

const montserrat = Montserrat({
  subsets: ["latin"],
  weight: ["200", "500", "600"],
});

interface ReviewPasswordGateProps {
  token: string;
  onUnlocked: () => void;
}

export function ReviewPasswordGate({ token, onUnlocked }: ReviewPasswordGateProps) {
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!password.trim()) return;
    setLoading(true);
    setError(null);
    try {
      const res = await fetch(`/api/client/${token}/auth`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ password }),
      });
      if (res.ok) {
        onUnlocked();
      } else {
        const data = await res.json().catch(() => ({}));
        setError(data.error ?? "Incorrect password. Please try again.");
      }
    } catch {
      setError("Something went wrong. Please try again.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-zinc-950 flex flex-col items-center justify-center px-4">
      <div className="w-full max-w-sm space-y-6">
        {/* Logo */}
        <div className={`flex items-center gap-3 justify-center ${montserrat.className}`}>
          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-black border border-zinc-800">
            <Image src="/logo.svg" alt="Logo" width={28} height={28} />
          </div>
          <div>
            <span className="block text-xl font-light text-white leading-none">TWO TALES</span>
            <span className="block text-[10px] tracking-[0.18em] italic text-zinc-400 leading-none mt-0.5">
              vfx review
            </span>
          </div>
        </div>

        {/* Card */}
        <div className="rounded-2xl border border-zinc-800 bg-zinc-900 p-8 space-y-5">
          <div className="flex flex-col items-center gap-2 text-center">
            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-500/10 border border-amber-500/20">
              <Lock className="h-6 w-6 text-amber-400" />
            </div>
            <h1 className="text-lg font-semibold text-white">Password Required</h1>
            <p className="text-sm text-zinc-400">
              This review link is password protected. Enter the password to access the content.
            </p>
          </div>

          <form onSubmit={handleSubmit} className="space-y-3">
            <div className="relative">
              <Input
                type={showPassword ? "text" : "password"}
                placeholder="Enter password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="pr-10 bg-zinc-950 border-zinc-700 focus:border-amber-500/50"
                autoFocus
                disabled={loading}
              />
              <button
                type="button"
                className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-200 transition-colors"
                onClick={() => setShowPassword((v) => !v)}
                tabIndex={-1}
              >
                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
              </button>
            </div>

            {error && (
              <p className="text-xs text-red-400 flex items-center gap-1.5">
                <span className="inline-block h-1 w-1 rounded-full bg-red-400 shrink-0" />
                {error}
              </p>
            )}

            <Button
              type="submit"
              className="w-full bg-amber-500 hover:bg-amber-400 text-black font-medium"
              disabled={loading || !password.trim()}
            >
              {loading ? "Verifying..." : "Access Review"}
            </Button>
          </form>
        </div>

        <p className="text-center text-xs text-zinc-600">
          Contact your studio if you don&apos;t have the password.
        </p>
      </div>
    </div>
  );
}