"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Monitor, Lock, KeyRound, Loader2 } from "lucide-react";
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@/components/ui/input-opt";

export default function DisplayAuth() {
  const router = useRouter();
  const [code, setCode] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setError("");

    try {
      const response = await fetch("/api/auth/exchange", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ code }),
      });

      if (!response.ok) {
        throw new Error("Invalid or expired code");
      }

      const { mode } = await response.json();

      // The cookie is set by the API route, just redirect
      router.push(`/display/${mode.toLowerCase()}`);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Authentication failed");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="min-h-screen w-full bg-gradient-to-b from-violet-50 via-white to-sky-50 flex items-center justify-center p-4">
      <Card className="w-full max-w-md rounded-2xl border-2 border-purple-100/50 hover:border-purple-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
        <CardHeader className="space-y-1 text-center">
          <div className="flex justify-center mb-4">
            <div className="h-16 w-16 rounded-full bg-purple-100 flex items-center justify-center">
              <Monitor className="h-8 w-8 text-purple-600" />
            </div>
          </div>
          <CardTitle className="text-2xl font-bold bg-gradient-to-r from-purple-600 via-pink-500 to-blue-500 bg-clip-text text-transparent">
            Display Authentication
          </CardTitle>
          <CardDescription>
            Enter the 6-digit code to initialize this display
          </CardDescription>
        </CardHeader>
        <CardContent>
          {error && (
            <div className="mb-4 p-3 rounded-lg bg-red-50 border border-red-100 text-red-600 text-sm">
              <div className="flex items-center gap-2">
                <Lock className="h-4 w-4" />
                {error}
              </div>
            </div>
          )}

          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-2">
              <div className="flex items-center gap-2 mb-2">
                <KeyRound className="h-4 w-4 text-gray-500" />
                <span className="text-sm text-gray-500">
                  Enter 6-digit code
                </span>
              </div>
              <InputOTP
                value={code}
                onChange={(value) => setCode(value)}
                maxLength={6}
                //! TODO ADD NUMERIC
                render={({ slots }) => (
                  <InputOTPGroup className="gap-2 flex justify-center">
                    {slots.map((slot, index) => (
                      <InputOTPSlot
                        key={index}
                        {...slot}
                        className="w-14 h-14 text-2xl border-2 rounded-xl border-purple-100 focus:border-purple-500 transition-all"
                      />
                    ))}
                  </InputOTPGroup>
                )}
              />
            </div>

            <Button
              type="submit"
              className="w-full h-12 text-lg bg-purple-600 text-white hover:bg-purple-700 rounded-xl"
              disabled={isLoading || code.length !== 6}
            >
              {isLoading ? (
                <>
                  <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                  Authenticating...
                </>
              ) : (
                "Initialize Display"
              )}
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}