"use client";

import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { Plus } from "lucide-react";
import { apiGet, apiPost } from "@/lib/api/client";
import type { Coupon, CouponType } from "@/lib/api/types";
import { useAuthStore } from "@/lib/stores/auth.store";
import { formatNumber } from "@/lib/format";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { LabeledField } from "@/components/ui/labeled-field";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

export function CouponsScreen() {
  const t = useTranslations("coupons");
  const tCommon = useTranslations("common");
  const cafeId = useAuthStore((s) => s.user?.cafeId);
  const queryClient = useQueryClient();

  const [showForm, setShowForm] = useState(false);
  const [code, setCode] = useState("");
  const [type, setType] = useState<CouponType>("Percentage");
  const [value, setValue] = useState("10");

  const { data: coupons = [], isLoading } = useQuery({
    queryKey: ["coupons", cafeId],
    queryFn: () => apiGet<Coupon[]>(`/api/cafes/${cafeId}/coupons`),
    enabled: !!cafeId,
  });

  const createCoupon = useMutation({
    mutationFn: () =>
      apiPost<Coupon>(`/api/cafes/${cafeId}/coupons`, {
        code,
        type,
        value: Number(value),
        isActive: true,
      }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["coupons", cafeId] });
      setShowForm(false);
      setCode("");
      setValue("10");
    },
  });

  if (!cafeId) return null;

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-bold">{t("title")}</h2>
        <Button onClick={() => setShowForm(!showForm)}>
          <Plus className="h-4 w-4" />
          {t("addCoupon")}
        </Button>
      </div>

      {showForm && (
        <Card>
          <CardContent className="grid gap-3 pt-6 sm:grid-cols-3">
            <LabeledField label={t("code")} htmlFor="coupon-code">
              <Input
                id="coupon-code"
                value={code}
                onChange={(e) => setCode(e.target.value)}
                dir="ltr"
                className="text-end"
              />
            </LabeledField>
            <LabeledField label={t("type")} htmlFor="coupon-type">
              <select
                id="coupon-type"
                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                value={type}
                onChange={(e) => setType(e.target.value as CouponType)}
              >
                <option value="Percentage">{t("types.Percentage")}</option>
                <option value="FixedAmount">{t("types.FixedAmount")}</option>
              </select>
            </LabeledField>
            <LabeledField label={t("value")} htmlFor="coupon-value">
              <Input
                id="coupon-value"
                value={value}
                onChange={(e) => setValue(e.target.value)}
                type="number"
                dir="ltr"
                className="text-end"
              />
            </LabeledField>
            <div className="flex gap-2 sm:col-span-3">
              <Button onClick={() => createCoupon.mutate()} disabled={createCoupon.isPending}>
                {tCommon("save")}
              </Button>
              <Button variant="outline" onClick={() => setShowForm(false)}>
                {tCommon("cancel")}
              </Button>
            </div>
          </CardContent>
        </Card>
      )}

      {isLoading ? (
        <p className="text-muted-foreground">{tCommon("loading")}</p>
      ) : coupons.length === 0 ? (
        <p className="text-muted-foreground">{t("noCoupons")}</p>
      ) : (
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {coupons.map((c) => (
            <Card key={c.id}>
              <CardHeader className="pb-2">
                <div className="flex items-center justify-between">
                  <CardTitle className="font-mono text-lg">{c.code}</CardTitle>
                  <Badge variant={c.isActive ? "default" : "secondary"}>
                    {c.isActive ? t("active") : t("inactive")}
                  </Badge>
                </div>
              </CardHeader>
              <CardContent className="text-sm text-muted-foreground">
                <p>
                  {t("type")}: {t(`types.${c.type}`)}
                </p>
                <p>
                  {t("value")}: {formatNumber(c.value)}
                  {c.type === "Percentage" ? "%" : " ت"}
                </p>
                <p>
                  {t("usage")}: {formatNumber(c.usedCount)}
                  {c.usageLimit ? ` / ${formatNumber(c.usageLimit)}` : ""}
                </p>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}