"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
import { ExternalLink, Loader2, Mail, Sparkles, Users2 } from "lucide-react";
import { createClient } from "@/lib/supabase/client";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

interface InvitationPayload {
  invitation: {
    id: string;
    project_id: string;
    email: string;
    role: "view" | "comment" | "edit";
    message: string;
    status: "pending" | "accepted" | "revoked";
    expires_at: string;
  };
  project: {
    id: string;
    name: string;
    description: string;
    icon: string;
    color: string;
  } | null;
}

export default function ProjectGuestInvitationPage() {
  const params = useParams();
  const router = useRouter();
  const token = params.token as string;
  const supabase = createClient();

  const [loading, setLoading] = useState(true);
  const [acting, setActing] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [payload, setPayload] = useState<InvitationPayload | null>(null);
  const [userEmail, setUserEmail] = useState<string | null>(null);

  useEffect(() => {
    async function loadInvitation() {
      setLoading(true);
      setError(null);

      const {
        data: { user },
      } = await supabase.auth.getUser();

      if (!user) {
        setUserEmail(null);
        setLoading(false);
        return;
      }

      setUserEmail(user.email?.toLowerCase() || null);

      const res = await fetch(`/api/projects/guests/invitations/${token}`);
      const data = await res.json();

      if (!res.ok) {
        setError(data.error || "Invitation could not be loaded.");
        setLoading(false);
        return;
      }

      setPayload(data);
      setLoading(false);
    }

    void loadInvitation();
  }, [supabase, token]);

  async function handleAction(action: "accept" | "decline") {
    setActing(true);
    setError(null);

    const res = await fetch(`/api/projects/guests/invitations/${token}`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ action }),
    });

    const data = await res.json();

    if (!res.ok) {
      setError(data.error || "Invitation action failed.");
      setActing(false);
      return;
    }

    if (action === "accept" && data.projectId) {
      router.push(`/projects/${data.projectId}`);
      return;
    }

    router.push("/projects");
  }

  if (loading) {
    return (
      <div className="mx-auto flex min-h-[70vh] max-w-xl items-center justify-center px-4">
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <Loader2 className="h-4 w-4 animate-spin" />
          Loading invitation...
        </div>
      </div>
    );
  }

  if (!userEmail) {
    return (
      <div className="mx-auto flex min-h-[70vh] max-w-xl items-center justify-center px-4">
        <Card className="w-full">
          <CardHeader>
            <CardTitle>Sign in to open this invitation</CardTitle>
            <CardDescription>
              Use the invited email address to accept guest access for this project.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Link href="/login">
              <Button>
                <Mail className="h-4 w-4" />
                Go to login
              </Button>
            </Link>
          </CardContent>
        </Card>
      </div>
    );
  }

  if (!payload || !payload.invitation) {
    return (
      <div className="mx-auto flex min-h-[70vh] max-w-xl items-center justify-center px-4">
        <Card className="w-full">
          <CardHeader>
            <CardTitle>Invitation not available</CardTitle>
            <CardDescription>
              This invitation may have expired or may not belong to the signed-in email.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Link href="/projects">
              <Button variant="outline">Back to projects</Button>
            </Link>
          </CardContent>
        </Card>
      </div>
    );
  }

  const { invitation, project } = payload;

  return (
    <div className="mx-auto flex min-h-[70vh] max-w-2xl items-center justify-center px-4 py-10">
      <Card className="w-full">
        <CardHeader>
          <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary">
            <Users2 className="h-6 w-6" />
          </div>
          <CardTitle>Project guest invitation</CardTitle>
          <CardDescription>
            You are signed in as <span className="font-medium text-foreground">{userEmail}</span>.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-5">
          {project && (
            <div className="rounded-2xl border border-border/70 bg-muted/20 p-4">
              <div className="flex items-start gap-4">
                <div
                  className="flex h-12 w-12 items-center justify-center rounded-xl text-2xl"
                  style={{ backgroundColor: `${project.color}18` }}
                >
                  {project.icon}
                </div>
                <div className="min-w-0">
                  <p className="text-sm font-semibold">{project.name}</p>
                  {project.description && (
                    <p className="mt-1 text-sm text-muted-foreground">
                      {project.description}
                    </p>
                  )}
                </div>
              </div>
            </div>
          )}

          <div className="grid gap-3 sm:grid-cols-2">
            <div className="rounded-xl border border-border/70 p-4">
              <p className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
                Access level
              </p>
              <p className="mt-2 text-lg font-semibold capitalize">{invitation.role}</p>
            </div>
            <div className="rounded-xl border border-border/70 p-4">
              <p className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
                Status
              </p>
              <p className="mt-2 text-lg font-semibold capitalize">{invitation.status}</p>
            </div>
          </div>

          {invitation.message && (
            <div className="rounded-2xl border border-border/70 bg-background p-4">
              <div className="mb-2 flex items-center gap-2 text-sm font-medium">
                <Sparkles className="h-4 w-4 text-primary" />
                Message from the inviter
              </div>
              <p className="text-sm text-muted-foreground whitespace-pre-wrap">
                {invitation.message}
              </p>
            </div>
          )}

          {error && <p className="text-sm text-destructive">{error}</p>}

          <div className="flex flex-wrap gap-2">
            <Button
              onClick={() => void handleAction("accept")}
              disabled={acting || invitation.status !== "pending"}
            >
              {acting ? <Loader2 className="h-4 w-4 animate-spin" /> : <ExternalLink className="h-4 w-4" />}
              Accept invitation
            </Button>
            <Button
              variant="outline"
              onClick={() => void handleAction("decline")}
              disabled={acting || invitation.status !== "pending"}
            >
              Decline
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}