"use client";

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

export default function TestCartPage() {
  const [cartData, setCartData] = useState<string>("");
  const [count, setCount] = useState(0);
  const [logs, setLogs] = useState<string[]>([]);

  const addLog = (msg: string) => {
    setLogs(prev => [...prev.slice(-9), `${new Date().toLocaleTimeString()}: ${msg}`]);
  };

  useEffect(() => {
    addLog("Component mounted");
    
    const interval = setInterval(() => {
      const raw = localStorage.getItem("kc_cart");
      setCartData(raw || "empty");
      
      if (raw) {
        try {
          const items = JSON.parse(raw);
          const total = items.reduce((sum: number, item: any) => sum + (item.quantity || 0), 0);
          setCount(total);
          addLog(`Found ${items.length} items, total qty: ${total}`);
        } catch (e) {
          setCount(-1);
          addLog("Error parsing cart data");
        }
      } else {
        setCount(0);
        addLog("Cart is empty");
      }
    }, 500);

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="min-h-screen bg-neutral-50 p-8">
      <div className="max-w-4xl mx-auto">
        <div className="flex items-center justify-between mb-4">
          <h1 className="text-2xl font-bold">Cart Debug Page</h1>
          <Link href="/shop" className="text-sm text-navy-600 hover:underline">← Back to Shop</Link>
        </div>
        
        <div className="bg-white rounded-xl border p-6 mb-4">
          <h2 className="font-semibold mb-2">Cart Count: <span className="text-2xl text-navy-700">{count}</span></h2>
          <p className="text-sm text-neutral-500">This should match the navbar badge</p>
        </div>

        <div className="bg-white rounded-xl border p-6 mb-4">
          <h2 className="font-semibold mb-2">Raw Cart Data:</h2>
          <pre className="text-xs bg-neutral-50 p-4 rounded overflow-x-auto">
            {cartData}
          </pre>
        </div>

        <div className="bg-white rounded-xl border p-6">
          <h2 className="font-semibold mb-2">Activity Log:</h2>
          <div className="text-xs font-mono bg-neutral-50 p-4 rounded space-y-1">
            {logs.map((log, i) => (
              <div key={i}>{log}</div>
            ))}
          </div>
        </div>

        <div className="mt-4 text-sm text-neutral-500 space-y-1">
          <p>✓ Polling every 500ms</p>
          <p>✓ Check if count matches navbar</p>
          <p>✓ Add a product and see if this updates</p>
          <p>✓ Activity log shows last 10 operations</p>
        </div>
      </div>
    </div>
  );
}