meezi/web/dashboard/src/components/settings/settings-shop-panel.tsx

"use client";

import { useEffect, useState } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { apiPatch, apiPost, apiUpload, resolveMediaUrl } from "@/lib/api/client";
import {
  cafeSettingsQueryKey,
  useCafeSettings,
  type CafeSettings,
} from "@/lib/hooks/use-cafe-settings";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { LabeledField } from "@/components/ui/labeled-field";
import { notify } from "@/lib/notify";

type SettingsShopPanelProps = {
  cafeId: string;
};

export function SettingsShopPanel({ cafeId }: SettingsShopPanelProps) {
  const t = useTranslations("settings");
  const queryClient = useQueryClient();

  const [name, setName] = useState("");
  const [city, setCity] = useState("");
  const [phone, setPhone] = useState("");
  const [address, setAddress] = useState("");
  const [description, setDescription] = useState("");
  const [logoUrl, setLogoUrl] = useState("");
  const [coverImageUrl, setCoverImageUrl] = useState("");
  const [snappfoodVendorId, setSnappfoodVendorId] = useState("");

  const { data: cafeSettings } = useCafeSettings(cafeId);

  useEffect(() => {
    if (!cafeSettings) return;
    setName(cafeSettings.name ?? "");
    setCity(cafeSettings.city ?? "");
    setPhone(cafeSettings.phone ?? "");
    setAddress(cafeSettings.address ?? "");
    setDescription(cafeSettings.description ?? "");
    setLogoUrl(cafeSettings.logoUrl ?? "");
    setCoverImageUrl(cafeSettings.coverImageUrl ?? "");
    setSnappfoodVendorId(cafeSettings.snappfoodVendorId ?? "");
  }, [cafeSettings]);

  const saveProfile = useMutation({
    mutationFn: () =>
      apiPatch<CafeSettings>(`/api/cafes/${cafeId}/settings`, {
        name,
        city,
        phone,
        address,
        description,
        logoUrl: logoUrl || null,
        coverImageUrl: coverImageUrl || null,
        snappfoodVendorId,
      }),
    onSuccess: (data) => {
      queryClient.setQueryData(cafeSettingsQueryKey(cafeId), data);
      notify.success(t("profile.saved"));
    },
  });

  const uploadLogo = useMutation({
    mutationFn: (file: File) =>
      apiUpload<{ url: string }>(`/api/cafes/${cafeId}/media/cafe-logo`, file),
    onSuccess: (data) => setLogoUrl(data.url),
  });

  const uploadCover = useMutation({
    mutationFn: (file: File) =>
      apiUpload<{ url: string }>(`/api/cafes/${cafeId}/media/cafe-cover`, file),
    onSuccess: (data) => setCoverImageUrl(data.url),
  });

  const submitTaraz = useMutation({
    mutationFn: () =>
      apiPost<{ trackingCode?: string; message?: string }>(
        `/api/cafes/${cafeId}/tax/taraz/submit`
      ),
    onSuccess: (data) => notify.success(data.message ?? t("tarazQueued")),
  });

  const logoSrc = resolveMediaUrl(logoUrl);

  return (
    <div className="space-y-4">
      <Card className="rounded-xl border border-border/80 shadow-sm">
        <CardHeader className="px-6 pb-4 pt-6">
          <CardTitle className="text-base font-medium">{t("profile.title")}</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6 px-6 pb-6 pt-0">
          <div className="flex flex-wrap items-center gap-4">
            {logoSrc ? (
              // eslint-disable-next-line @next/next/no-img-element
              <img src={logoSrc} alt="" className="h-16 w-16 rounded-lg object-cover" />
            ) : (
              <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-muted text-xs text-muted-foreground">
                {t("profile.logo")}
              </div>
            )}
            <div className="flex flex-wrap gap-2">
              <label className="cursor-pointer rounded-md border px-3 py-2 text-sm hover:bg-muted">
                {t("profile.uploadLogo")}
                <input
                  type="file"
                  accept="image/jpeg,image/png,image/webp"
                  className="hidden"
                  onChange={(e) => {
                    const f = e.target.files?.[0];
                    if (f) uploadLogo.mutate(f);
                  }}
                />
              </label>
              <label className="cursor-pointer rounded-md border px-3 py-2 text-sm hover:bg-muted">
                {t("profile.uploadCover")}
                <input
                  type="file"
                  accept="image/jpeg,image/png,image/webp"
                  className="hidden"
                  onChange={(e) => {
                    const f = e.target.files?.[0];
                    if (f) uploadCover.mutate(f);
                  }}
                />
              </label>
            </div>
          </div>
          <div className="grid gap-4 sm:grid-cols-2">
            <LabeledField label={t("profile.name")} htmlFor="cafe-name">
              <Input id="cafe-name" value={name} onChange={(e) => setName(e.target.value)} />
            </LabeledField>
            <LabeledField label={t("profile.city")} htmlFor="cafe-city">
              <Input id="cafe-city" value={city} onChange={(e) => setCity(e.target.value)} />
            </LabeledField>
            <LabeledField label={t("profile.phone")} htmlFor="cafe-phone">
              <Input
                id="cafe-phone"
                value={phone}
                onChange={(e) => setPhone(e.target.value)}
                dir="ltr"
                className="text-end"
              />
            </LabeledField>
            <LabeledField label={t("profile.address")} htmlFor="cafe-address">
              <Input
                id="cafe-address"
                value={address}
                onChange={(e) => setAddress(e.target.value)}
              />
            </LabeledField>
          </div>
          <LabeledField label={t("profile.description")} htmlFor="cafe-description">
            <textarea
              id="cafe-description"
              className="min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
            />
          </LabeledField>
          <Button
            className="bg-[#0F6E56] hover:bg-[#0c5e46]"
            disabled={saveProfile.isPending}
            onClick={() => saveProfile.mutate()}
          >
            {t("saveProfile")}
          </Button>
        </CardContent>
      </Card>

      <Card className="rounded-xl border border-border/80 shadow-sm">
        <CardHeader className="px-6 pb-4 pt-6">
          <CardTitle className="text-base font-medium">{t("snappfoodVendor")}</CardTitle>
        </CardHeader>
        <CardContent className="px-6 pb-6 pt-0">
          <LabeledField label={t("snappfoodVendor")} htmlFor="snappfood-vendor">
            <Input
              id="snappfood-vendor"
              value={snappfoodVendorId}
              onChange={(e) => setSnappfoodVendorId(e.target.value)}
              dir="ltr"
              className="text-end"
            />
          </LabeledField>
        </CardContent>
      </Card>

      <Card className="rounded-xl border border-border/80 shadow-sm">
        <CardHeader className="px-6 pb-4 pt-6">
          <CardTitle className="text-base font-medium">{t("taraz")}</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4 px-6 pb-6 pt-0">
          <p className="text-sm leading-relaxed text-muted-foreground">{t("tarazHint")}</p>
          <Button
            variant="outline"
            disabled={submitTaraz.isPending}
            onClick={() => submitTaraz.mutate()}
          >
            {t("tarazSubmit")}
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}