import React from "react";
import {
  Table,
  TableBody,
  TableCell,
  TableColumn,
  TableHeader,
  TableRow,
} from "@heroui/react";
import type { EvaluationRuleSet } from "./adminRulesetTypes";

type AdminRulesetsTableProps = {
  items: EvaluationRuleSet[];
  locale: string;
  valuePlaceholder: string;
  formatDate: (value: string | null | undefined, lang: string) => string;
  onEdit: (item: EvaluationRuleSet) => void;
  t: (key: string) => string;
};

const PencilIcon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 20 20"
    fill="currentColor"
    className="h-4 w-4"
  >
    <path d="M13.586 3.586a2 2 0 0 1 2.828 2.828l-8.25 8.25a2 2 0 0 1-.878.518l-3.122.89a.75.75 0 0 1-.926-.926l.89-3.122a2 2 0 0 1 .518-.878l8.25-8.25Z" />
    <path d="M12.475 4.697 4.75 12.422l-.69 2.422 2.422-.69 7.725-7.725-1.732-1.732Z" />
  </svg>
);

export default function AdminRulesetsTable({
  items,
  locale,
  valuePlaceholder,
  formatDate,
  onEdit,
  t,
}: AdminRulesetsTableProps) {
  return (
    <Table aria-label={t("admin_rulesets_table_aria") ?? "Evaluation rulesets table"} selectionMode="none">
      <TableHeader>
        <TableColumn>{t("admin_rulesets_table_name") ?? "Název"}</TableColumn>
        <TableColumn>{t("admin_rulesets_table_code") ?? "Kód"}</TableColumn>
        <TableColumn>{t("admin_rulesets_table_scoring") ?? "Scoring"}</TableColumn>
        <TableColumn>{t("admin_rulesets_table_multiplier") ?? "Multiplier"}</TableColumn>
        <TableColumn>{t("admin_rulesets_table_updated") ?? "Aktualizace"}</TableColumn>
        <TableColumn></TableColumn>
      </TableHeader>
      <TableBody items={items}>
        {(item) => (
          <TableRow key={item.id}>
            <TableCell>{item.name}</TableCell>
            <TableCell>{item.code}</TableCell>
            <TableCell>{item.scoring_mode ?? valuePlaceholder}</TableCell>
            <TableCell>{item.multiplier_type ?? valuePlaceholder}</TableCell>
            <TableCell>{formatDate(item.updated_at ?? null, locale)}</TableCell>
            <TableCell>
              <button
                type="button"
                onClick={() => onEdit(item)}
                className="inline-flex items-center p-1 rounded hover:bg-default-100 text-default-500 hover:text-default-700"
                aria-label={t("admin_rulesets_edit_aria") ?? "Upravit rule set"}
              >
                <PencilIcon />
              </button>
            </TableCell>
          </TableRow>
        )}
      </TableBody>
    </Table>
  );
}