"use client";

import Link from "next/link";
import { useEffect, useState } from "react";

import { browserFetch } from "../lib/api";
import { logoutByNavigation } from "../lib/logout";

type MeResponse = {
  user: { id: string; email: string; role: string } | null;
  makerProfile: { id: string; slug: string; business_name: string | null; status: string } | null;
};

export default function ProfileClient() {
  const [session, setSession] = useState<MeResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [status, setStatus] = useState("");

  useEffect(() => {
    let active = true;

    async function loadSession() {
      try {
        const response = await browserFetch<MeResponse>("/auth/me");
        if (active) {
          setSession(response);
        }
      } catch (error) {
        if (active) {
          setStatus(error instanceof Error ? error.message : "No se pudo cargar la sesion");
          setSession({ user: null, makerProfile: null });
        }
      } finally {
        if (active) {
          setLoading(false);
        }
      }
    }

    void loadSession();

    return () => {
      active = false;
    };
  }, []);

  useEffect(() => {
    if (session?.user?.role === "admin") {
      window.location.replace("/app/backoffice");
    }
  }, [session?.user?.role]);

  function logout() {
    logoutByNavigation();
  }

  if (loading) {
    return (
      <section className="profile-account-card stack">
        <h1 className="section-title">Cargando perfil</h1>
        <p className="muted">Validando tu sesion para mostrar el acceso correcto.</p>
      </section>
    );
  }

  if (!session?.user) {
    return (
      <section className="profile-account-card stack">
        <h1 className="section-title">Necesitas iniciar sesion</h1>
        <p className="muted">Entra con un usuario demo para probar cliente, maker o administrador.</p>
        <Link href="/login?returnTo=%2Fprofile" className="button button-primary">Entrar</Link>
      </section>
    );
  }

  if (session.user.role === "admin") {
    return (
      <section className="workspace-main-card stack">
        <span className="eyebrow">Backoffice</span>
        <h1 className="section-title">Redirigiendo al panel administrador</h1>
        <p className="muted">La cuenta superadmin no usa perfil maker ni perfil cliente.</p>
        <button className="button button-secondary" type="button" onClick={logout}>Cerrar sesion</button>
        {status ? <p className="muted">{status}</p> : null}
      </section>
    );
  }

  if (session.makerProfile && session.makerProfile.status !== "draft") {
    const makerName = session.makerProfile.business_name || "Tu espacio Maker";

    return (
      <section className="profile-account-card stack">
        <div className="profile-identity">
          <span className="profile-avatar">{makerName.slice(0, 2).toUpperCase()}</span>
          <div>
            <span className="eyebrow">Perfil maker</span>
            <h1 className="section-title">{makerName}</h1>
            <p className="muted">{session.user.email}</p>
          </div>
        </div>
        <div className="profile-status-grid">
          <div className="stat-tile"><span className="stat-value">Activo</span><span className="mini-note">Estado de cuenta</span></div>
          <div className="stat-tile"><span className="stat-value">{session.makerProfile.status}</span><span className="mini-note">Perfil publico</span></div>
        </div>
        <div className="profile-action-grid">
          <Link href="/account" className="profile-action-tile">
            <strong>Mi espacio maker</strong>
            <span>Dashboard, trabajos, servicios y reputacion.</span>
          </Link>
          <Link href="/account/inbox" className="profile-action-tile">
            <strong>Consultas recibidas</strong>
            <span>Mensajes de clientes y propuestas de trabajo.</span>
          </Link>
          <Link href={`/makers/${session.makerProfile.slug}`} className="profile-action-tile">
            <strong>Ver perfil publico</strong>
            <span>Asi te ven clientes y proveedores.</span>
          </Link>
          <Link href="/favorites" className="profile-action-tile">
            <strong>Favoritos</strong>
            <span>Makers y trabajos que guardaste.</span>
          </Link>
        </div>
        <button className="button button-secondary" type="button" onClick={logout}>Cerrar sesion</button>
        {status ? <p className="muted">{status}</p> : null}
      </section>
    );
  }

  return (
    <section className="profile-account-card stack client-profile-card">
      <div className="profile-identity">
        <span className="profile-avatar">CL</span>
        <div>
          <span className="eyebrow">Perfil cliente</span>
          <h1 className="section-title">Tu cuenta de cliente</h1>
          <p className="muted">{session.user.email}</p>
        </div>
      </div>
      <div className="profile-action-grid">
        <Link href="/messages" className="profile-action-tile">
          <strong>Mensajes</strong>
          <span>Tus consultas enviadas a makers y sus respuestas.</span>
        </Link>
        <Link href="/favorites" className="profile-action-tile">
          <strong>Favoritos</strong>
          <span>Makers y trabajos guardados para revisar despues.</span>
        </Link>
        <Link href="/account" className="profile-action-tile">
          <strong>Crear mi espacio maker</strong>
          <span>Solo si tambien queres publicar servicios como maker.</span>
        </Link>
      </div>
      <button className="button button-secondary" type="button" onClick={logout}>Cerrar sesion</button>
      {status ? <p className="muted">{status}</p> : null}
    </section>
  );
}