"use client";

import { useConvexAuth, useQuery } from "convex/react";
import Link from "next/link";
import { api } from "../../../../../convex/_generated/api";

const sections = [
  {
    title: "Order History",
    description: "View your past orders and track current ones.",
    href: "/account/orders",
    cta: "View orders",
  },
  {
    title: "Wishlist",
    description: "View and manage your saved items.",
    href: "/wishlist",
    cta: "Coming soon",
  },
  {
    title: "Addresses",
    description: "Manage your shipping and billing addresses.",
    href: "/account/addresses",
    cta: "Coming soon",
  },
  {
    title: "Profile Settings",
    description: "Update your name, email, and preferences.",
    href: "/account/settings",
    cta: "Coming soon",
  },
] as const;

export default function AccountPage() {
  const { isAuthenticated, isLoading: authLoading } = useConvexAuth();
  const user = useQuery(
    api.users.current,
    isAuthenticated ? {} : "skip",
  );

  if (authLoading || (isAuthenticated && user === undefined)) {
    return <AccountSkeleton />;
  }

  if (!isAuthenticated || user === null) {
    return (
      <div className="py-16 text-center">
        <p className="text-gray-500">You need to sign in to view your account.</p>
        <Link
          href="/sign-in"
          className="mt-4 inline-block rounded-md bg-[#236f6b] px-6 py-2 text-sm font-medium text-white hover:bg-[#1b5955] transition-colors"
        >
          Sign In
        </Link>
      </div>
    );
  }

  return (
    <div className="space-y-8">
      <div>
        <h1 className="font-serif text-2xl font-semibold text-gray-900 md:text-3xl">
          My Account
        </h1>
        <p className="mt-1 text-sm text-gray-500">
          Welcome back, {user.name}
        </p>
      </div>

      <div className="rounded-lg border border-gray-200 bg-white p-6">
        <h2 className="text-sm font-medium uppercase tracking-wide text-gray-500">
          Account Details
        </h2>
        <dl className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
          <div>
            <dt className="text-sm text-gray-500">Name</dt>
            <dd className="mt-1 text-sm font-medium text-gray-900">{user.name}</dd>
          </div>
          <div>
            <dt className="text-sm text-gray-500">Email</dt>
            <dd className="mt-1 text-sm font-medium text-gray-900">{user.email}</dd>
          </div>
          <div>
            <dt className="text-sm text-gray-500">Role</dt>
            <dd className="mt-1 text-sm font-medium text-gray-900 capitalize">{user.role}</dd>
          </div>
        </dl>
      </div>

      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
        {sections.map((section) => (
          <Link
            key={section.href}
            href={section.href}
            className="group rounded-lg border border-gray-200 bg-white p-6 transition-shadow hover:shadow-md"
          >
            <h3 className="font-medium text-gray-900 group-hover:text-[#236f6b]">
              {section.title}
            </h3>
            <p className="mt-1 text-sm text-gray-500">{section.description}</p>
            <span className="mt-3 inline-block text-sm font-medium text-[#236f6b]">
              {section.cta} &rarr;
            </span>
          </Link>
        ))}
      </div>
    </div>
  );
}

function AccountSkeleton() {
  return (
    <div className="animate-pulse space-y-8">
      <div>
        <div className="h-8 w-40 rounded bg-gray-200" />
        <div className="mt-2 h-4 w-56 rounded bg-gray-200" />
      </div>
      <div className="rounded-lg border border-gray-200 bg-white p-6">
        <div className="h-4 w-32 rounded bg-gray-200" />
        <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
          {Array.from({ length: 3 }).map((_, i) => (
            <div key={i}>
              <div className="h-3 w-16 rounded bg-gray-200" />
              <div className="mt-2 h-4 w-36 rounded bg-gray-200" />
            </div>
          ))}
        </div>
      </div>
      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
        {Array.from({ length: 3 }).map((_, i) => (
          <div key={i} className="rounded-lg border border-gray-200 bg-white p-6">
            <div className="h-5 w-28 rounded bg-gray-200" />
            <div className="mt-2 h-4 w-full rounded bg-gray-200" />
          </div>
        ))}
      </div>
    </div>
  );
}
