badoHair_fe/app/admin/parametres/page.tsx

"use client";

import { useState, useEffect } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";
import { adminGetSettings, adminUpdateSetting } from "@/lib/api/settings";
import { useLanguage } from "@/contexts/LanguageContext";
import { ApiError } from "@/lib/api";
import { Save } from "lucide-react";

const SETTING_KEYS = ["default_booking_price"] as const;
type SettingKey = typeof SETTING_KEYS[number];

interface SettingMeta { label: string; description: string; type: "number" | "text" }

export default function AdminParametres() {
  const { t, locale } = useLanguage();
  const [values, setValues] = useState<Record<string, string>>({ default_booking_price: "0" });
  const [updatedAt, setUpdatedAt] = useState<Record<string, string>>({});
  const [saving, setSaving] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  const SETTING_META: Record<SettingKey, SettingMeta> = {
    default_booking_price: {
      label: t("admin.settings.booking_price_label"),
      description: t("admin.settings.booking_price_desc"),
      type: "number",
    },
  };

  useEffect(() => {
    adminGetSettings()
      .then((rows) => {
        const vals: Record<string, string> = { default_booking_price: "0" };
        const dates: Record<string, string> = {};
        rows.forEach((r) => {
          vals[r.key] = r.value !== null && r.value !== undefined ? String(r.value) : "";
          if (r.updated_at) dates[r.key] = r.updated_at;
        });
        setValues(vals);
        setUpdatedAt(dates);
      })
      .catch((e) => toast.error(e instanceof ApiError ? e.message : t("admin.error")))
      .finally(() => setLoading(false));
  }, []);

  const handleSave = async (key: string) => {
    setSaving(key);
    try {
      const meta = SETTING_META[key as SettingKey];
      const raw = values[key] ?? "";
      const value = meta?.type === "number" ? parseFloat(raw) || 0 : raw;
      const saved = await adminUpdateSetting(key, value);
      if (saved.updated_at) setUpdatedAt((prev) => ({ ...prev, [key]: saved.updated_at }));
      toast.success(t("admin.settings.saved"));
    } catch (err) {
      toast.error(err instanceof ApiError ? err.message : t("admin.error"));
    } finally {
      setSaving(null);
    }
  };

  return (
    <div className="space-y-8 max-w-2xl">
      <div>
        <h2 className="font-serif text-2xl font-semibold">{t("admin.settings.title")}</h2>
        <p className="text-sm text-muted-foreground mt-1">{t("admin.settings.subtitle")}</p>
      </div>

      {loading ? (
        <div className="space-y-4">
          {Array.from({ length: 2 }).map((_, i) => (
            <div key={i} className="h-20 bg-muted animate-pulse rounded-lg" />
          ))}
        </div>
      ) : (
        <Card>
          <CardHeader>
            <CardTitle className="text-base">{t("admin.settings.bookings")}</CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            {SETTING_KEYS.map((key) => {
              const meta = SETTING_META[key];
              return (
                <div key={key}>
                  <Label htmlFor={key}>{meta.label}</Label>
                  <p className="text-xs text-muted-foreground mb-2">{meta.description}</p>
                  <div className="flex gap-2">
                    <Input
                      id={key}
                      type={meta.type}
                      min={meta.type === "number" ? 0 : undefined}
                      value={values[key] ?? ""}
                      onChange={(e) => setValues((prev) => ({ ...prev, [key]: e.target.value }))}
                      className="max-w-[200px]"
                    />
                    <Button size="sm" onClick={() => handleSave(key)} disabled={saving === key}>
                      <Save className="h-4 w-4 mr-2" />
                      {saving === key ? t("admin.saving") : t("admin.save")}
                    </Button>
                  </div>
                  {updatedAt[key] && (
                    <p className="text-xs text-muted-foreground mt-1">
                      {t("admin.settings.last_updated")} {new Date(updatedAt[key]).toLocaleDateString(locale)}
                    </p>
                  )}
                </div>
              );
            })}
          </CardContent>
        </Card>
      )}
    </div>
  );
}