import type React from "react";
import type { Route } from "./+types/home";

export function meta({ }: Route.MetaArgs) {
  return [
    { title: "New React Router App" },
    { name: "description", content: "Welcome to React Router!" },
  ];
}

export default function Home() {
  return (
    <div className="h-screen grid grid-cols-[280px_1fr]">
      {/* Sidebar */}
      <aside className="bg-panel p-4 space-y-4">
        <div className="text-lg font-semibold">
          3dplot-gen
          <div className="text-xs text-muted">
            CSV → 3D Plot
          </div>
        </div>

        <div className="space-y-3">
          <Control label="CSV file">
            <input
              type="file"
              accept=".csv"
              className="w-full text-sm file:bg-bg file:text-slate-300 file:border-0
                         file:rounded file:px-2 file:py-1"
            />
          </Control>

          <Control label="X axis">
            <select className="w-full bg-bg border border-slate-700 rounded px-2 py-1">
              <option>-</option>
            </select>
          </Control>

          <Control label="Y axis">
            <select className="w-full bg-bg border border-slate-700 rounded px-2 py-1">
              <option>-</option>
            </select>
          </Control>

          <Control label="Z axis">
            <select className="w-full bg-bg border border-slate-700 rounded px-2 py-1">
              <option>-</option>
            </select>
          </Control>
        </div>
      </aside>

      {/* Plot */}
      <main className="bg-plot">
        <div
          id="plot"
          className="w-full h-full"
        />
      </main>
    </div>
  );
}

function Control({ label, children }: { label: string, children: React.ReactNode }) {
  return (
    <div className="space-y-1">
      <label className="text-xs text-muted">{label}</label>
      {children}
    </div>
  );
}