/**
 * List page for {{ plural_name }}.
 *
 * ✅ YOUR CODE - Safe to modify, will not be overwritten.
 * This file was generated once by Prism and is yours to customize.
 */

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { use{{ model_name }}List, use{{ model_name }}Mutations } from '../../hooks/use{{ model_name }}';
import { {{ model_name }}Table } from '../../components/{{ kebab_name }}/{{ model_name }}Table';
import type { {{ model_name }} } from '../../types/generated';

export default function {{ plural_name }}ListPage(): JSX.Element {
  const navigate = useNavigate();
  const [page, setPage] = useState(1);
  const { data, loading, error, totalCount, hasNextPage, hasPreviousPage, refetch } = use{{ model_name }}List({
    page,
    pageSize: 20,
  });
  const { remove, loading: mutating } = use{{ model_name }}Mutations();

  const handleRowClick = (item: {{ model_name }}) => {
    navigate(`/{{ plural_kebab }}/${item.id}`);
  };

  const handleEdit = (item: {{ model_name }}) => {
    navigate(`/{{ plural_kebab }}/${item.id}/edit`);
  };

  const handleDelete = async (item: {{ model_name }}) => {
    if (window.confirm('Are you sure you want to delete this {{ model_name_lower }}?')) {
      await remove(item.id);
      refetch();
    }
  };
{% if show_create_button %}

  const handleCreate = () => {
    navigate('/{{ plural_kebab }}/new');
  };
{% endif %}

  if (error) {
    return (
      <div className="page-container">
        <div className="alert-error">
          <p>Error: {error.message}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="page-container">
      <header className="page-header flex items-center justify-between">
        <div>
          <h1 className="page-title">{{ plural_name }}</h1>
          <p className="page-subtitle">Manage your {{ plural_name_lower }}</p>
        </div>
{% if show_create_button %}
        <button onClick={handleCreate} className="btn-primary">
          <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
          </svg>
          Create {{ model_name }}
        </button>
{% endif %}
      </header>

      <div className="card overflow-hidden">
        <{{ model_name }}Table
          data={data}
          loading={loading || mutating}
          onRowClick={handleRowClick}
          onEdit={handleEdit}
          onDelete={handleDelete}
        />
      </div>

      <div className="mt-6 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <button
            onClick={() => setPage((p) => p - 1)}
            disabled={!hasPreviousPage || loading}
            className="btn-secondary disabled:opacity-50 disabled:cursor-not-allowed"
          >
            Previous
          </button>
          <button
            onClick={() => setPage((p) => p + 1)}
            disabled={!hasNextPage || loading}
            className="btn-secondary disabled:opacity-50 disabled:cursor-not-allowed"
          >
            Next
          </button>
        </div>
        <p className="text-sm text-muted">
          Page {page} · {totalCount} total
        </p>
      </div>
    </div>
  );
}
