'use client';

import { useState } from 'react';
import { useMutation } from '@tanstack/react-query';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinners';
import { updateCommission } from '@/network/apis/dashboard/marketplace/marketplace.apis';
import { NotificationPhoneCard } from './NotificationPhoneCard';

export function MarketplaceSettings() {
  const [commission, setCommission] = useState<string>('10');

  const { mutate, isPending } = useMutation({
    mutationFn: () => updateCommission(Number(commission)),
    onSuccess: (data) => {
      toast.success(`Commission updated to ${data.commission_percent}%`);
    },
    onError: (error: unknown) => {
      const msg =
        (error as { response?: { data?: { message?: string } } })?.response
          ?.data?.message || 'Failed to update commission';
      toast.error(msg);
    },
  });

  const value = Number(commission);
  const valid =
    commission.trim().length > 0 &&
    !Number.isNaN(value) &&
    value >= 0 &&
    value <= 100;

  return (
    <div className="space-y-5 max-w-2xl">
      <div>
        <h2 className="text-lg font-semibold">Marketplace settings</h2>
        <p className="text-sm text-muted-foreground">
          Global configuration for the creator marketplace.
        </p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Platform commission</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <Label>Commission percent</Label>
            <div className="flex gap-2 items-center">
              <Input
                type="number"
                min={0}
                max={100}
                step={0.5}
                value={commission}
                onChange={(e) => setCommission(e.target.value)}
                className="max-w-xs"
              />
              <span className="text-sm text-muted-foreground">%</span>
            </div>
            <p className="text-xs text-muted-foreground mt-1">
              Applied to every paid booking. Allowed range 0–100.
            </p>
            {!valid ? (
              <p className="text-xs text-red-600 mt-1">
                Enter a number between 0 and 100.
              </p>
            ) : null}
          </div>

          <div className="pt-2 border-t flex justify-end">
            <Button onClick={() => mutate()} disabled={!valid || isPending}>
              {isPending ? (
                <Spinner className="size-4 animate-spin mr-2" />
              ) : null}
              Save
            </Button>
          </div>
        </CardContent>
      </Card>

      <NotificationPhoneCard />
    </div>
  );
}