"use client";

import { useMemo } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { CATEGORIES, PARTS } from "@/data/gunbuilderParts";
import type { CategoryId } from "@/types/gunbuilder";
import { getPricingHistory, getRetailerOffers } from "./data";
import { PricingHistoryGraph } from "@/components/PricingHistoryGraph";
import { RetailersList } from "@/components/RetailersList";

export default function PartDetailPage() {
  const params = useParams();
  const categoryId = params.categoryId as CategoryId;
  const partId = params.partId as string;

  const category = useMemo(
    () => CATEGORIES.find((c) => c.id === categoryId),
    [categoryId],
  );

  const part = useMemo(
    () => PARTS.find((p) => p.id === partId && p.categoryId === categoryId),
    [partId, categoryId],
  );

  // Get pricing history and retailer offers
  // TODO: Replace with API calls when endpoints are ready
  const pricingHistory = useMemo(
    () => (part ? getPricingHistory(part.id, part.price) : []),
    [part],
  );

  const retailerOffers = useMemo(
    () =>
      part
        ? getRetailerOffers(part.id, part.price, part.affiliateUrl)
        : [],
    [part],
  );

  if (!category || !part) {
    return (
      <main className="min-h-screen bg-black text-zinc-50">
        <div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
          <div className="text-center">
            <h1 className="text-2xl font-semibold text-zinc-50 mb-4">
              Product Not Found
            </h1>
            <Link
              href="/gunbuilder"
              className="text-amber-300 hover:text-amber-200 underline"
            >
              Return to Gunbuilder
            </Link>
          </div>
        </div>
      </main>
    );
  }

  return (
    <main className="min-h-screen bg-black text-zinc-50">
      <div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
        {/* Header */}
        <header className="mb-6">
          <Link
            href={`/gunbuilder/${categoryId}`}
            className="text-xs text-zinc-400 hover:text-zinc-300 mb-4 inline-block"
          >
            ← Back to {category.name}
          </Link>
          <div>
            <p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
              Shadow Standard
            </p>
            <h1 className="mt-1 text-2xl md:text-3xl font-semibold tracking-tight">
              {part.brand} <span className="text-amber-300">{part.name}</span>
            </h1>
            <p className="mt-2 text-sm text-zinc-400 max-w-xl">
              {category.name} • Product Details
            </p>
          </div>
        </header>

        {/* Product Details */}
        <div className="grid gap-4 lg:grid-cols-[2fr,1fr]">
          {/* Main Content */}
          <section className="space-y-4">
            {/* Product Information */}
            <div className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-4 md:p-6">
              <div className="grid gap-6 md:grid-cols-[1fr,1fr]">
                {/* Product Info */}
                <div>
                  <div className="text-xs font-semibold tracking-[0.16em] uppercase text-zinc-400 mb-2">
                    Product Information
                  </div>
                  <div className="space-y-3">
                    <div>
                      <div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
                        Brand
                      </div>
                      <div className="text-lg font-semibold text-zinc-50">
                        {part.brand}
                      </div>
                    </div>
                    <div>
                      <div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
                        Model
                      </div>
                      <div className="text-lg font-semibold text-zinc-50">
                        {part.name}
                      </div>
                    </div>
                    <div>
                      <div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
                        Category
                      </div>
                      <div className="text-lg font-semibold text-zinc-50">
                        {category.name}
                      </div>
                    </div>
                    {part.notes && (
                      <div>
                        <div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
                          Details
                        </div>
                        <div className="text-sm text-zinc-300 leading-relaxed">
                          {part.notes}
                        </div>
                      </div>
                    )}
                  </div>
                </div>

                {/* Product Image */}
                <div className="flex items-start justify-center">
                  <div className="w-full aspect-square max-w-md rounded-md border border-zinc-700 bg-zinc-900/50 flex items-center justify-center">
                    <div className="text-center p-8">
                      <svg
                        className="w-16 h-16 mx-auto text-zinc-600 mb-2"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={1.5}
                          d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
                        />
                      </svg>
                      <p className="text-xs text-zinc-500 uppercase tracking-wide">
                        Product Image
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Retailers List */}
            {retailerOffers.length > 0 && (
              <div className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-4 md:p-6">
                <RetailersList retailers={retailerOffers} />
              </div>
            )}
          </section>

          {/* Sidebar */}
          <aside className="rounded-lg border border-zinc-800 bg-zinc-950/80 p-4 md:p-6 flex flex-col">
            <div className="mb-4">
              <div className="text-xs text-zinc-400 mb-2">Price</div>
              <div className="text-3xl font-semibold text-amber-300">
                ${part.price.toFixed(2)}
              </div>
            </div>

            {/* Pricing History */}
            {pricingHistory.length > 0 && (
              <div className="mb-6">
                <PricingHistoryGraph
                  data={pricingHistory}
                  currentPrice={part.price}
                />
              </div>
            )}

            <div className="mt-auto space-y-3">
              <Link
                href={`/gunbuilder?select=${categoryId}:${part.id}`}
                className="block w-full rounded-md border border-amber-400/60 bg-amber-400/10 px-4 py-3 text-sm font-medium text-amber-200 hover:bg-amber-400/15 text-center transition-colors"
              >
                Add to Build
              </Link>
              <a
                href={part.affiliateUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="block w-full rounded-md border border-zinc-700 bg-zinc-900/50 px-4 py-3 text-sm font-medium text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600 text-center transition-colors"
              >
                View Retailer
              </a>
            </div>
          </aside>
        </div>
      </div>
    </main>
  );
}