"use client";

import React, { createContext, useCallback, useContext, useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { PasswordInput } from "@/components/ui/password-input";
import DataService from "@/config/axios";
import { getApiErrorMessage } from "@/lib/api-error";
import { applyLoginCookiesOnly } from "@/redux/api/auth-api";
import type { LoginResponse } from "@/redux/api/auth-types";
import { setUser } from "@/redux/slices/user";
import { store } from "@/redux/store";
import { toast } from "sonner";
import { usePublicSession } from "@/components/shop/public-session-context";

type AuthModalContextValue = {
  open: boolean;
  openAuthModal: (tab?: "login" | "register") => void;
  closeAuthModal: () => void;
};

const AuthModalContext = createContext<AuthModalContextValue | null>(null);

export function AuthModalProvider({ children }: { children: React.ReactNode }) {
  const { refresh } = usePublicSession();
  const [open, setOpen] = useState(false);
  const [defaultTab, setDefaultTab] = useState<"login" | "register">("login");
  const [loginData, setLoginData] = useState({ username: "", password: "" });
  const [regData, setRegData] = useState({
    firstname: "",
    lastname: "",
    email: "",
    password: "",
    confirmpassword: "",
  });
  const [busy, setBusy] = useState(false);

  const closeAuthModal = useCallback(() => setOpen(false), []);

  const openAuthModal = useCallback((tab: "login" | "register" = "login") => {
    setDefaultTab(tab);
    setOpen(true);
  }, []);

  const submitLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setBusy(true);
    try {
      const identity = loginData.username.trim();
      const res = await DataService.post<LoginResponse>("/auth/login", {
        password: loginData.password,
        username: identity,
        email: identity,
      });
      const data = res.data;
      if (!data?.token) {
        toast.error("Login failed");
        return;
      }
      applyLoginCookiesOnly(data);
      store.dispatch(setUser(data));
      await refresh();
      toast.success("Signed in successfully");
      setOpen(false);
      setLoginData({ username: "", password: "" });
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Invalid username or password"));
    } finally {
      setBusy(false);
    }
  };

  const submitRegister = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!regData.firstname.trim() || !regData.lastname.trim() || !regData.email.trim()) {
      toast.error("Please fill in all fields");
      return;
    }
    if (regData.password !== regData.confirmpassword) {
      toast.error("Passwords do not match");
      return;
    }
    setBusy(true);
    try {
      await DataService.post("/auth/register", {
        password: regData.password,
        email: regData.email,
        firstname: regData.firstname,
        lastname: regData.lastname,
        role: "user",
      });
      toast.success("Account created — you can sign in now");
      setRegData({
        firstname: "",
        lastname: "",
        email: "",
        password: "",
        confirmpassword: "",
      });
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Registration failed"));
    } finally {
      setBusy(false);
    }
  };

  return (
    <AuthModalContext.Provider value={{ open, openAuthModal, closeAuthModal }}>
      {children}
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Sign in to continue</DialogTitle>
          </DialogHeader>
          <Tabs
            key={defaultTab}
            defaultValue={defaultTab}
            className="w-full"
          >
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="login">Login</TabsTrigger>
              <TabsTrigger value="register">Register</TabsTrigger>
            </TabsList>
            <TabsContent value="login" className="mt-4 space-y-3">
              <form onSubmit={submitLogin} className="space-y-3">
                <div className="space-y-2">
                  <Label htmlFor="modal-username">Email or Username</Label>
                  <Input
                    id="modal-username"
                    autoComplete="username"
                    value={loginData.username}
                    onChange={(e) =>
                      setLoginData((d) => ({ ...d, username: e.target.value }))
                    }
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="modal-password">Password</Label>
                  <PasswordInput
                    id="modal-password"
                    autoComplete="current-password"
                    value={loginData.password}
                    onChange={(e) =>
                      setLoginData((d) => ({ ...d, password: e.target.value }))
                    }
                    required
                  />
                </div>
                <Button type="submit" className="w-full" disabled={busy}>
                  {busy ? "Please wait…" : "Sign in"}
                </Button>
              </form>
            </TabsContent>
            <TabsContent value="register" className="mt-4 space-y-3">
              <form onSubmit={submitRegister} className="space-y-3">
                <div className="grid gap-2 sm:grid-cols-2">
                  <div className="space-y-2">
                    <Label>First name</Label>
                    <Input
                      value={regData.firstname}
                      onChange={(e) =>
                        setRegData((d) => ({ ...d, firstname: e.target.value }))
                      }
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>Last name</Label>
                    <Input
                      value={regData.lastname}
                      onChange={(e) =>
                        setRegData((d) => ({ ...d, lastname: e.target.value }))
                      }
                    />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label>Email</Label>
                  <Input
                    type="email"
                    value={regData.email}
                    onChange={(e) =>
                      setRegData((d) => ({ ...d, email: e.target.value }))
                    }
                  />
                </div>
                <div className="space-y-2">
                  <Label>Password</Label>
                  <PasswordInput
                    value={regData.password}
                    onChange={(e) =>
                      setRegData((d) => ({ ...d, password: e.target.value }))
                    }
                    autoComplete="new-password"
                  />
                </div>
                <div className="space-y-2">
                  <Label>Confirm password</Label>
                  <PasswordInput
                    value={regData.confirmpassword}
                    onChange={(e) =>
                      setRegData((d) => ({ ...d, confirmpassword: e.target.value }))
                    }
                    autoComplete="new-password"
                  />
                </div>
                <Button type="submit" className="w-full" disabled={busy}>
                  {busy ? "Please wait…" : "Create account"}
                </Button>
              </form>
            </TabsContent>
          </Tabs>
        </DialogContent>
      </Dialog>
    </AuthModalContext.Provider>
  );
}

export function useAuthModal() {
  const ctx = useContext(AuthModalContext);
  if (!ctx) throw new Error("useAuthModal must be used within AuthModalProvider");
  return ctx;
}