#!/bin/zsh

echo "📘 Creating Models Browser Page..."

PAGE="src/app/models"
COMP="src/app/components"
LIB="src/lib/ui"

mkdir -p "$PAGE"

#############################################
# Create models/page.js
#############################################

cat > "$PAGE/page.js" << 'EOF'
"use client";

import { useEffect, useState } from "react";
import ModelCard from "../components/ModelCard";

export default function ModelsPage() {
  const [models, setModels] = useState([]);
  const [filtered, setFiltered] = useState([]);
  const [brand, setBrand] = useState("all");
  const [scale, setScale] = useState("all");

  useEffect(() => {
    async function load() {
      const res = await fetch("/api/models", { cache: "no-store" });
      const data = await res.json();
      setModels(data);
      setFiltered(data);
    }
    load();
  }, []);

  function filter() {
    let result = [...models];

    if (brand !== "all") {
      result = result.filter(m => m.brand === brand);
    }
    if (scale !== "all") {
      result = result.filter(m => m.scale === scale);
    }

    setFiltered(result);
  }

  const brands = [...new Set(models.map(m => m.brand))];
  const scales = [...new Set(models.map(m => m.scale))];

  return (
    <div className="space-y-6">
      <h1 className="text-4xl font-bold">All Models</h1>

      {/* Filters */}
      <div className="flex gap-4 items-end">
        <div>
          <label className="block mb-1 font-semibold">Brand</label>
          <select
            className="border p-2 rounded"
            value={brand}
            onChange={e => setBrand(e.target.value)}
          >
            <option value="all">All</option>
            {brands.map(b => <option key={b} value={b}>{b}</option>)}
          </select>
        </div>

        <div>
          <label className="block mb-1 font-semibold">Scale</label>
          <select
            className="border p-2 rounded"
            value={scale}
            onChange={e => setScale(e.target.value)}
          >
            <option value="all">All</option>
            {scales.map(s => <option key={s} value={s}>{s}</option>)}
          </select>
        </div>

        <button
          onClick={filter}
          className="px-4 py-2 bg-primary text-white rounded"
        >
          Apply Filters
        </button>
      </div>

      {/* Model Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {filtered.map(model => (
          <a key={model.id} href={`/model/${model.id}`} className="block">
            <ModelCard model={model} />
          </a>
        ))}
      </div>
    </div>
  );
}
EOF

echo "🎉 Models Browser Page created!"