"use client";

import type {
  Badge,
  HotelFeatures,
  HotelFeaturesType,
  Tarif,
  Transport,
  Type,
} from "@/pages/tours/lib/type";
import { Button } from "@/shared/ui/button";
import { type ColumnDef } from "@tanstack/react-table";
import type { Dispatch, SetStateAction } from "react";
import { useTranslation } from "react-i18next";

export const BadgesColumns = (
  onEdit: (id: number) => void,
  onDelete: (id: number) => void,
  t: (key: string) => string,
): ColumnDef<Badge>[] => [
  {
    accessorKey: "id",
    header: "ID",
    cell: ({ row }) => <span>{row.original.id}</span>,
  },
  {
    accessorKey: "name",
    header: t("Nomi"),
    cell: ({ row }) => <span>{row.original.name}</span>,
  },
  {
    accessorKey: "color",
    header: t("Rang"),
    cell: ({ row }) => (
      <div className="flex items-center gap-2">
        <span
          className="w-5 h-5 rounded-full border border-gray-600"
          style={{ backgroundColor: row.original.color }}
        ></span>
        <span>{row.original.color}</span>
      </div>
    ),
  },
  {
    id: "actions",
    header: () => <div className="text-right">{t("Harakatlar")}</div>,
    cell: ({ row }) => {
      const { t } = useTranslation();
      return (
        <div className="flex justify-end gap-2">
          {" "}
          {/* o‘ngga tekislangan tugmalar */}
          <Button
            size="sm"
            variant="outline"
            onClick={() => onEdit(row.original.id)}
          >
            {t("Tahrirlash")}
          </Button>
          <Button
            size="sm"
            variant="destructive"
            onClick={() => onDelete(row.original.id)}
          >
            {t("O'chirish")}
          </Button>
        </div>
      );
    },
  },
];

export const TarifColumns = (
  onEdit: (id: number) => void,
  onDelete: (id: number) => void,
  t: (key: string) => string,
): ColumnDef<Tarif>[] => [
  {
    accessorKey: "id",
    header: "ID",
    cell: ({ row }) => <span>{row.original.id}</span>,
  },
  {
    accessorKey: "name",
    header: t("Nomi"),
    cell: ({ row }) => <span>{row.original.name}</span>,
  },
  {
    id: "actions",
    header: () => <div className="text-right">{t("Harakatlar")}</div>,
    cell: ({ row }) => {
      const { t } = useTranslation();
      return (
        <div className="flex justify-end gap-2">
          <Button
            size="sm"
            variant="outline"
            disabled
            onClick={() => onEdit(row.original.id)}
          >
            {t("Tahrirlash")}
          </Button>
          <Button
            size="sm"
            disabled
            variant="destructive"
            onClick={() => onDelete(row.original.id)}
          >
            {t("O'chirish")}
          </Button>
        </div>
      );
    },
  },
];

export const TranportColumns = (
  onEdit: (id: number) => void,
  onDelete: (id: number) => void,
  t: (key: string) => string,
): ColumnDef<Transport>[] => [
  {
    accessorKey: "id",
    header: "ID",
    cell: ({ row }) => <span>{row.original.id}</span>,
  },
  {
    accessorKey: "name",
    header: t("Nomi"),
    cell: ({ row }) => <span>{row.original.name}</span>,
  },
  {
    id: "actions",
    header: () => <div className="text-right">{t("Harakatlar")}</div>,
    cell: ({ row }) => {
      const { t } = useTranslation();
      return (
        <div className="flex justify-end gap-2">
          <Button
            size="sm"
            variant="outline"
            onClick={() => onEdit(row.original.id)}
          >
            {t("Tahrirlash")}
          </Button>
          <Button
            size="sm"
            variant="destructive"
            onClick={() => onDelete(row.original.id)}
          >
            {t("O'chirish")}
          </Button>
        </div>
      );
    },
  },
];

export const TypeColumns = (
  onEdit: (id: number) => void,
  onDelete: (id: number) => void,
  t: (key: string) => string,
): ColumnDef<Type>[] => [
  {
    accessorKey: "id",
    header: "ID",
    cell: ({ row }) => <span>{row.original.id}</span>,
  },
  {
    accessorKey: "name",
    header: t("Nomi"),
    cell: ({ row }) => <span>{row.original.name}</span>,
  },
  {
    id: "actions",
    header: () => <div className="text-right">{t("Harakatlar")}</div>,
    cell: ({ row }) => {
      const { t } = useTranslation();
      return (
        <div className="flex justify-end gap-2">
          <Button
            size="sm"
            variant="outline"
            onClick={() => onEdit(row.original.id)}
          >
            {t("Tahrirlash")}
          </Button>
          <Button
            size="sm"
            variant="destructive"
            onClick={() => onDelete(row.original.id)}
          >
            {t("O'chirish")}
          </Button>
        </div>
      );
    },
  },
];

export const FeatureColumns = (
  onEdit: (id: number) => void,
  onDelete: (id: number) => void,
  t: (key: string) => string,
  setActiveTab: Dispatch<SetStateAction<string>>,
  setFeatureId: Dispatch<SetStateAction<number | null>>,
): ColumnDef<HotelFeatures>[] => [
  {
    accessorKey: "id",
    header: "ID",
    cell: ({ row }) => <span>{row.original.id}</span>,
  },
  {
    accessorKey: "name",
    header: t("Nomi"),
    cell: ({ row }) => <span>{row.original.hotel_feature_type_name}</span>,
  },
  {
    accessorKey: "name",
    header: () => <div>{t("Kategoriya nomi")} (ru)</div>,
    cell: ({ row }) => <span>{row.original.hotel_feature_type_name_ru}</span>,
  },
  {
    id: "actions",
    header: () => <div className="text-right">{t("Harakatlar")}</div>,
    cell: ({ row }) => {
      const { t } = useTranslation();
      return (
        <div className="flex justify-end gap-2">
          <Button
            size="sm"
            variant="outline"
            onClick={() => {
              setActiveTab("feature_type");
              setFeatureId(row.original.id);
            }}
          >
            {t("Ko'rish")}
          </Button>
          <Button
            size="sm"
            variant="outline"
            onClick={() => onEdit(row.original.id)}
          >
            {t("Tahrirlash")}
          </Button>
          <Button
            size="sm"
            variant="destructive"
            onClick={() => onDelete(row.original.id)}
          >
            {t("O'chirish")}
          </Button>
        </div>
      );
    },
  },
];

export const FeatureTypeColumns = (
  onEdit: (id: number) => void,
  onDelete: (id: number) => void,
  t: (key: string) => string,
): ColumnDef<HotelFeaturesType>[] => [
  {
    accessorKey: "id",
    header: "ID",
    cell: ({ row }) => <span>{row.original.id}</span>,
  },
  {
    accessorKey: "name",
    header: t("Nomi"),
    cell: ({ row }) => <span>{row.original.feature_name}</span>,
  },
  {
    accessorKey: "name",
    header: () => <div>{t("Kategoriya nomi")}</div>,
    cell: ({ row }) => (
      <span>{row.original.feature_type.hotel_feature_type_name}</span>
    ),
  },
  {
    id: "actions",
    header: () => <div className="text-right">{t("Harakatlar")}</div>,
    cell: ({ row }) => {
      const { t } = useTranslation();
      return (
        <div className="flex justify-end gap-2">
          <Button
            size="sm"
            variant="outline"
            onClick={() => onEdit(row.original.id)}
          >
            {t("Tahrirlash")}
          </Button>
          <Button
            size="sm"
            variant="destructive"
            onClick={() => onDelete(row.original.id)}
          >
            {t("O'chirish")}
          </Button>
        </div>
      );
    },
  },
];