Kuma/src/modules/marketing/ui/views/studio-emails-settings-view.tsx

"use client";

import { useState, useTransition } from "react";
import { Mail } from "lucide-react";
import { toast } from "sonner";
import { Switch } from "@/src/components/ui/switch";
import { setMyStudioConsent, type StudioConsentRow } from "../../actions/consent-actions";

interface StudioEmailsSettingsViewProps {
  initialStudios: StudioConsentRow[];
}

const StudioEmailsSettingsView = ({ initialStudios }: StudioEmailsSettingsViewProps) => {
  const [studios, setStudios] = useState(initialStudios);
  const [, startSaving] = useTransition();

  const toggle = (businessId: string, granted: boolean) => {
    const update = (value: boolean) =>
      setStudios((rows) =>
        rows.map((row) => (row.businessId === businessId ? { ...row, granted: value } : row))
      );
    update(granted);
    startSaving(async () => {
      const result = await setMyStudioConsent(businessId, granted);
      if (!result.success) {
        update(!granted);
        toast.error(result.error);
      }
    });
  };

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl flex items-center gap-2 font-bold">
          <Mail /> E-Mails von Studios
        </h1>
        <p className="text-sm text-gray-500 mt-1">
          Legen Sie fest, welche Studios Ihnen Angebote und Glückwünsche schicken dürfen. Buchungs-
          und Zahlungsbestätigungen bekommen Sie immer.
        </p>
      </div>

      {studios.length === 0 ? (
        <div className="border border-white/60 bg-white/55 backdrop-blur-xl rounded-xl p-6 text-center">
          <p className="text-sm text-gray-500">
            Sobald Sie bei einem Studio gebucht haben, erscheint es hier.
          </p>
        </div>
      ) : (
        <ul className="divide-y divide-white/50 rounded-xl border border-white/60 bg-white/55 backdrop-blur-xl">
          {studios.map((studio) => (
            <li key={studio.businessId} className="flex items-start gap-4 p-4">
              <div className="min-w-0 flex-1">
                <p className="text-sm font-medium">{studio.studioName}</p>
                <p className="mt-0.5 text-sm text-gray-500">{studio.label}</p>
              </div>
              <Switch
                checked={studio.granted}
                onCheckedChange={(next) => toggle(studio.businessId, next)}
                aria-label={`E-Mails von ${studio.studioName}`}
                className="mt-1"
              />
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default StudioEmailsSettingsView;