import { MetaFunction } from "@remix-run/node";
import { Link, useLocation } from "@remix-run/react";
import { Button } from "../components/ui/button";
import { Home, Search, ArrowRight } from "lucide-react";

export const meta: MetaFunction = () => {
  const title = "صفحه مورد نظر یافت نشد | ویترون";
  const description = "صفحه‌ای که دنبال آن می‌گردید یافت نشد.";
  const imageUrl =
    "https://vitrownstatics.s3.ir-thr-at1.arvanstorage.ir/SVG-06.svg?versionId=";

  return [
    { title },
    { name: "description", content: description },
    { name: "robots", content: "noindex, follow" },

    // Open Graph
    { property: "og:type", content: "website" },
    { property: "og:title", content: title },
    { property: "og:description", content: description },
    { property: "og:image", content: imageUrl },
    { property: "og:site_name", content: "ویترون" },
    { property: "og:locale", content: "fa_IR" },

    // Twitter Card
    { name: "twitter:card", content: "summary" },
    { name: "twitter:title", content: title },
    { name: "twitter:description", content: description },
    { name: "twitter:image", content: imageUrl },
  ];
};

export default function NotFound() {
  const location = useLocation();

  return (
    <div className="flex flex-col items-center justify-center min-h-[calc(100vh-200px)] px-6 py-12">
      {/* 404 Number */}
      <div className="relative mb-8">
        <h1 className="text-[120px] md:text-[180px] font-bold text-BLACK/5 select-none leading-none">
          404
        </h1>
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="w-20 h-20 md:w-28 md:h-28 rounded-full bg-BLACK/5 animate-pulse" />
        </div>
      </div>

      {/* Message */}
      <div className="flex flex-col items-center gap-4 text-center max-w-md mb-8">
        <h2 className="text-B24 font-bold text-BLACK">
          صفحه مورد نظر یافت نشد
        </h2>
        <p className="text-R16 text-GRAY">
          متأسفانه صفحه‌ای که به دنبال آن هستید وجود ندارد یا منتقل شده است.
        </p>
        {location.pathname && (
          <div className="mt-2 px-4 py-2 bg-WHITE2 rounded-lg">
            <p className="text-R12 text-GRAY break-all" dir="ltr">
              {location.pathname}
            </p>
          </div>
        )}
      </div>

      {/* Action Buttons */}
      <div className="flex flex-col sm:flex-row gap-4 w-full max-w-md">
        <Link to="/" className="flex-1">
          <Button variant="dark" size="xl" className="w-full">
            <Home className="ml-2" />
            بازگشت به خانه
          </Button>
        </Link>
        <Link to="/explore" className="flex-1">
          <Button variant="outline" size="xl" className="w-full">
            <Search className="ml-2" />
            جستجو در سایت
          </Button>
        </Link>
      </div>

      {/* Helpful Links */}
      <div className="mt-12 pt-8 border-t border-BLACK/10 w-full max-w-md">
        <p className="text-R14 text-GRAY mb-4 text-center">
          یا به یکی از صفحات زیر بروید:
        </p>
        <div className="flex flex-col gap-2">
          <Link
            to="/explore"
            className="flex items-center justify-between px-4 py-3 rounded-lg hover:bg-WHITE2 transition-colors"
          >
            <span className="text-R14 text-BLACK">کاوش در محصولات</span>
            <ArrowRight className="text-GRAY w-4 h-4" />
          </Link>
          <Link
            to="/profile"
            className="flex items-center justify-between px-4 py-3 rounded-lg hover:bg-WHITE2 transition-colors"
          >
            <span className="text-R14 text-BLACK">پروفایل من</span>
            <ArrowRight className="text-GRAY w-4 h-4" />
          </Link>
          <Link
            to="profile/faq"
            className="flex items-center justify-between px-4 py-3 rounded-lg hover:bg-WHITE2 transition-colors"
          >
            <span className="text-R14 text-BLACK">سوالات متداول</span>
            <ArrowRight className="text-GRAY w-4 h-4" />
          </Link>
          <Link
            to="/about"
            className="flex items-center justify-between px-4 py-3 rounded-lg hover:bg-WHITE2 transition-colors"
          >
            <span className="text-R14 text-BLACK">درباره ویترون</span>
            <ArrowRight className="text-GRAY w-4 h-4" />
          </Link>
        </div>
      </div>
    </div>
  );
}