import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
{{$relativePrefix := relativePrefix .Page.Path}}{{range .AST.Definitions}}{{if .Entity}}import { {{.Entity.Name}} } from '{{$relativePrefix}}types/{{.Entity.Name}}';
{{end}}{{end}}
{{range .Page.Elements}}{{if .Section}}import {{.Section.Name | title}}Section from '{{$relativePrefix}}components/sections/{{.Section.Name | title}}Section';
{{end}}{{if .Component}}import {{.Component.Type | title}}Component from '{{$relativePrefix}}components/{{.Component.Type | title}}Component';
{{end}}{{end}}

export default function {{.Page.Name}}Page() {
  const navigate = useNavigate();
  const [user] = useState(null); // TODO: Implement actual auth

  // Redirect if not authenticated
  React.useEffect(() => {
    if (!user) {
      navigate('/login');
    }
  }, [user, navigate]);

  if (!user) {
    return <div>Loading...</div>;
  }

  return (
    <div className="min-h-screen bg-gray-100">
      <header className="bg-white shadow">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center">
              <Link to="/admin/dashboard" className="text-xl font-bold text-blue-600">
                Admin Dashboard
              </Link>
            </div>
            <nav className="flex space-x-8">
              {{range .AST.Definitions}}{{if .Page}}{{if eq .Page.Layout "admin"}}<Link
                to="{{.Page.Path}}"
                className="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium"
              >
                {{.Page.Name}}
              </Link>
              {{end}}{{end}}{{end}}
              <button className="text-red-600 hover:text-red-700 px-3 py-2 rounded-md text-sm font-medium">
                Logout
              </button>
            </nav>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <div className="px-4 py-6 sm:px-0">
          <h1 className="text-3xl font-bold text-gray-900 mb-6">
            {{if .Page.Title}}{{.Page.Title | derefString}}{{else}}{{.Page.Name}}{{end}}
          </h1>

          {{range .Page.Elements}}
          {{if .Section}}
          <{{.Section.Name | title}}Section />
          {{end}}
          {{if .Component}}
          <{{.Component.Type | title}}Component />
          {{end}}
          {{end}}
        </div>
      </main>
    </div>
  );
}