"use client";

import { useList } from "@/lib/useResource";
import { DataTable, type Column } from "@/components/DataTable";
import { PageHeader, Card } from "@/components/ui";
import { toFa } from "@/lib/utils";

interface Mood {
  id: number;
  name?: string;
  title?: string;
  emoji?: string;
  icon?: string;
}

export default function MoodsPage() {
  const { data, loading, error, reload } = useList<Mood>("/moods");

  const columns: Column<Mood>[] = [
    { key: "id", header: "شناسه", render: (r) => toFa(r.id), className: "w-20" },
    { key: "name", header: "نام", render: (r) => r.name ?? r.title ?? "—" },
    {
      key: "emoji",
      header: "نماد",
      render: (r) => r.emoji ?? r.icon ?? "—",
      className: "w-24",
    },
  ];

  return (
    <div>
      <PageHeader
        title="حالت‌ها"
        subtitle="فهرست حالت‌های احساسی کاربران"
      />

      <DataTable
        columns={columns}
        rows={data}
        loading={loading}
        error={error}
        onRetry={reload}
        emptyTitle="حالتی تعریف نشده"
        emptyMessage="هیچ حالتی برای نمایش وجود ندارد."
      />

      <Card className="mt-4">
        <p className="text-sm text-muted">
          حالت‌ها از پیش تعریف شده‌اند و قابل ویرایش نیستند.
        </p>
      </Card>
    </div>
  );
}