import { Badge } from "@workspace/ui/components/badge";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
} from "@workspace/ui/components/sheet";
import {
  Table,
  TableBody,
  TableCell,
  TableRow,
} from "@workspace/ui/components/table";
import { useTranslation } from "react-i18next";
import { formatDate } from "@/utils/common";

interface RuleDetailProps {
  open: boolean;
  rule?: API.PromoRule;
  onOpenChange: (open: boolean) => void;
}

export default function RuleDetail({
  open,
  rule,
  onOpenChange,
}: RuleDetailProps) {
  const { t } = useTranslation("promo");

  return (
    <Sheet onOpenChange={onOpenChange} open={open}>
      <SheetContent className="w-[520px] max-w-full md:max-w-screen-md">
        <SheetHeader>
          <SheetTitle>
            {rule?.name || t("ruleDetail", "Rule Detail")}
          </SheetTitle>
        </SheetHeader>
        {rule && (
          <div className="px-6 pt-4">
            <Table>
              <TableBody>
                <TableRow>
                  <TableCell>{t("type", "Type")}</TableCell>
                  <TableCell>
                    <Badge variant="outline">
                      {t(`types.${rule.type}`, rule.type)}
                    </Badge>
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>{t("priority", "Priority")}</TableCell>
                  <TableCell>{rule.priority}</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>{t("enabled", "Enabled")}</TableCell>
                  <TableCell>
                    {rule.enabled ? t("yes", "Yes") : t("no", "No")}
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>{t("params", "Params")}</TableCell>
                  <TableCell>
                    <code className="whitespace-pre-wrap rounded bg-muted px-2 py-1 text-xs">
                      {JSON.stringify(rule.params || {}, null, 2)}
                    </code>
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>
                    {t("validityPeriod", "Validity Period")}
                  </TableCell>
                  <TableCell>
                    {rule.start_time ? formatDate(rule.start_time) : "--"} -{" "}
                    {rule.end_time ? formatDate(rule.end_time) : "--"}
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </div>
        )}
      </SheetContent>
    </Sheet>
  );
}