// LCP: Preload critical images and fonts
// app/layout.tsx
import { Inter } from "next/font/google";
 
const inter = Inter({
  subsets: ["latin"],
  display: "swap", // Prevent FOIT (Flash of Invisible Text)
  preload: true,
});
 
// app/page.tsx -- Optimize the hero image (usually the LCP element)
import Image from "next/image";
 
export default function HomePage() {
  return (
    <section>
      <Image
        src="/hero.webp"
        alt="Product showcase"
        width={1200}
        height={600}
        priority           // Preloads, disables lazy loading
        sizes="100vw"      // Tells browser the image is full-width
        quality={85}
        placeholder="blur"
        blurDataURL={heroBlurDataURL}
      />
    </section>
  );
}
 
// CLS: Reserve space for dynamic content
function ProductCard({ product }: { product: Product }) {
  return (
    <div className="w-full">
      {/* Fixed aspect ratio prevents layout shift when image loads */}
      <div className="relative aspect-[4/3] w-full overflow-hidden rounded-lg">
        <Image
          src={product.image}
          alt={product.name}
          fill
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          className="object-cover"
        />
      </div>
      {/* Fixed height for skeleton loading */}
      <div className="mt-2 h-6">
        <h3 className="truncate text-sm font-medium">{product.name}</h3>
      </div>
      <div className="h-5">
        <p className="text-sm text-muted-foreground">{formatPrice(product.price)}</p>
      </div>
    </div>
  );
}
 
// INP: Break long tasks with yielding
async function processLargeDataset(items: DataItem[]) {
  const CHUNK_SIZE = 100;
  const results: ProcessedItem[] = [];
 
  for (let i = 0; i < items.length; i += CHUNK_SIZE) {
    const chunk = items.slice(i, i + CHUNK_SIZE);
    results.push(...chunk.map(processItem));
 
    // Yield to main thread between chunks to keep UI responsive
    if (i + CHUNK_SIZE < items.length) {
      await new Promise((resolve) => setTimeout(resolve, 0));
    }
  }
 
  return results;
}

// ALWAYS: Use dynamic imports for heavy, non-critical modules
// BAD: Static import loads chart library on every page
import { Chart } from "chart.js/auto";
 
// GOOD: Dynamic import loads only when needed
const ChartView = dynamic(() => import("@/components/chart-view"), {
  loading: () => <ChartSkeleton />,
  ssr: false, // Chart.js needs browser APIs
});
 
// ALWAYS: Import only what you need from large libraries
// BAD: Imports entire icon library (hundreds of KB)
import * as Icons from "lucide-react";
 
// GOOD: Named imports enable tree-shaking
import { Search, Menu, X } from "lucide-react";
 
// size-limit configuration for CI budget enforcement
// package.json
{
  "size-limit": [
    {
      "path": ".next/static/chunks/app/page-*.js",
      "limit": "50 kB",
      "name": "Home page JS"
    },
    {
      "path": ".next/static/chunks/app/dashboard/**/*.js",
      "limit": "120 kB",
      "name": "Dashboard JS"
    },
    {
      "path": ".next/static/css/**/*.css",
      "limit": "30 kB",
      "name": "Total CSS"
    }
  ]
}

-- ALWAYS: Use EXPLAIN ANALYZE to understand query performance
EXPLAIN (ANALYZE, BUFFERS, FORMAT TEXT)
SELECT o.*, u.name as customer_name
FROM orders o
JOIN users u ON u.id = o.user_id
WHERE o.status = 'pending'
  AND o.created_at > NOW() - INTERVAL '7 days'
ORDER BY o.created_at DESC
LIMIT 20;
 
-- Look for:
-- Seq Scan -> Add index if table is large
-- Nested Loop with many iterations -> Consider hash or merge join
-- Sort with high memory -> Add index matching ORDER BY
-- Rows estimated vs actual differ widely -> Run ANALYZE on table

// ALWAYS: Detect N+1 queries with query counting middleware
import { PrismaClient } from "@prisma/client";
 
function createInstrumentedClient() {
  const prisma = new PrismaClient({
    log: [{ level: "query", emit: "event" }],
  });
 
  let queryCount = 0;
 
  prisma.$on("query", () => {
    queryCount++;
  });
 
  return {
    prisma,
    resetCount: () => { queryCount = 0; },
    getCount: () => queryCount,
    assertMaxQueries: (max: number, label: string) => {
      if (queryCount > max) {
        console.warn(
          `[PERF] ${label}: ${queryCount} queries executed (max: ${max}). ` +
          `Possible N+1 detected.`
        );
      }
    },
  };
}

// k6/load-test.js
import http from "k6/http";
import { check, sleep } from "k6";
import { Rate, Trend } from "k6/metrics";
 
const errorRate = new Rate("errors");
const orderLatency = new Trend("order_latency");
 
export const options = {
  stages: [
    { duration: "2m", target: 50 },   // Ramp up to 50 VUs
    { duration: "5m", target: 50 },   // Sustain 50 VUs
    { duration: "2m", target: 200 },  // Spike to 200 VUs
    { duration: "5m", target: 200 },  // Sustain spike
    { duration: "2m", target: 0 },    // Ramp down
  ],
  thresholds: {
    http_req_duration: ["p(95)<500", "p(99)<1000"], // 95% under 500ms
    errors: ["rate<0.01"],                           // Less than 1% errors
  },
};
 
export default function () {
  // Simulate realistic user behavior
  const listRes = http.get(`${__ENV.BASE_URL}/api/products?limit=20`);
  check(listRes, { "list status 200": (r) => r.status === 200 });
 
  sleep(Math.random() * 3 + 1); // Think time: 1-4 seconds
 
  const productId = JSON.parse(listRes.body).data[0]?.id;
  if (productId) {
    const detailRes = http.get(`${__ENV.BASE_URL}/api/products/${productId}`);
    check(detailRes, { "detail status 200": (r) => r.status === 200 });
  }
 
  sleep(Math.random() * 2 + 1);
 
  // Create order
  const start = Date.now();
  const orderRes = http.post(
    `${__ENV.BASE_URL}/api/orders`,
    JSON.stringify({ productId, quantity: 1 }),
    { headers: { "Content-Type": "application/json" } },
  );
  orderLatency.add(Date.now() - start);
  errorRate.add(orderRes.status !== 201);
 
  sleep(Math.random() * 2 + 1);
}

// ALWAYS: Wrap expensive computations with useMemo
function ProductList({ products, filters }: ProductListProps) {
  // Memoize only when the computation is genuinely expensive
  const filteredProducts = useMemo(() => {
    return products
      .filter((p) => matchesFilters(p, filters))
      .sort((a, b) => a.name.localeCompare(b.name));
  }, [products, filters]);
 
  return (
    <div className="grid grid-cols-3 gap-4">
      {filteredProducts.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}
 
// ALWAYS: Virtualize long lists
import { useVirtualizer } from "@tanstack/react-virtual";
 
function VirtualizedList({ items }: { items: ListItem[] }) {
  const parentRef = useRef<HTMLDivElement>(null);
 
  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 64,
    overscan: 5,
  });
 
  return (
    <div ref={parentRef} className="h-[600px] overflow-auto">
      <div
        style={{ height: `${virtualizer.getTotalSize()}px`, position: "relative" }}
      >
        {virtualizer.getVirtualItems().map((virtualRow) => (
          <div
            key={virtualRow.key}
            style={{
              position: "absolute",
              top: 0,
              left: 0,
              width: "100%",
              height: `${virtualRow.size}px`,
              transform: `translateY(${virtualRow.start}px)`,
            }}
          >
            <ListItemRow item={items[virtualRow.index]} />
          </div>
        ))}
      </div>
    </div>
  );
}

// ALWAYS: Clean up subscriptions in useEffect
function useWebSocket(url: string) {
  const [messages, setMessages] = useState<Message[]>([]);
 
  useEffect(() => {
    const ws = new WebSocket(url);
    const controller = new AbortController();
 
    ws.addEventListener("message", (event) => {
      if (!controller.signal.aborted) {
        setMessages((prev) => [...prev, JSON.parse(event.data)]);
      }
    }, { signal: controller.signal });
 
    return () => {
      controller.abort();
      ws.close();
    };
  }, [url]);
 
  return messages;
}
 
// ALWAYS: Avoid growing arrays without bounds in state
// BAD: Messages array grows forever
const [messages, setMessages] = useState<Message[]>([]);
// ...
setMessages((prev) => [...prev, newMessage]); // Never trimmed
 
// GOOD: Cap the buffer size
const MAX_MESSAGES = 500;
setMessages((prev) => {
  const updated = [...prev, newMessage];
  return updated.length > MAX_MESSAGES ? updated.slice(-MAX_MESSAGES) : updated;
});