'use client';

import { useCallback, useEffect, useState, type ComponentProps } from 'react';
import { useRouter } from 'next/navigation';
import { Bookmark, BookmarkCheck } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useAuth } from '@/contexts/AuthContext';
import { api } from '@/lib/api';
import { cn } from '@/lib/utils';

interface SaveWorkerButtonProps {
  workerId: string;
  variant?: 'button' | 'icon';
  buttonVariant?: ComponentProps<typeof Button>['variant'];
  size?: ComponentProps<typeof Button>['size'];
  className?: string;
  onChange?: (saved: boolean) => void;
}

export function SaveWorkerButton({
  workerId,
  variant = 'button',
  buttonVariant = 'outline',
  size = 'default',
  className,
  onChange,
}: SaveWorkerButtonProps) {
  const router = useRouter();
  const { user } = useAuth();
  const [saved, setSaved] = useState(false);
  const [loading, setLoading] = useState(false);
  const [checked, setChecked] = useState(false);

  const isCustomer = user?.role === 'CUSTOMER';

  useEffect(() => {
    if (!isCustomer || !workerId) {
      setChecked(true);
      return;
    }
    api<{ data: { saved: boolean } }>(`/users/customer/saved-workers/check/${workerId}`)
      .then((res) => {
        setSaved(res.data.saved);
        onChange?.(res.data.saved);
      })
      .catch(console.error)
      .finally(() => setChecked(true));
  }, [workerId, isCustomer]);

  const toggle = useCallback(async () => {
    if (!user) {
      router.push(`/login?redirect=${encodeURIComponent(window.location.pathname)}`);
      return;
    }
    if (user.role !== 'CUSTOMER') return;

    setLoading(true);
    try {
      if (saved) {
        await api(`/users/customer/saved-workers/${workerId}`, { method: 'DELETE' });
        setSaved(false);
        onChange?.(false);
      } else {
        await api('/users/customer/saved-workers', {
          method: 'POST',
          body: JSON.stringify({ workerId }),
        });
        setSaved(true);
        onChange?.(true);
      }
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  }, [user, saved, workerId, router, onChange]);

  if (!checked && isCustomer) {
    return variant === 'icon' ? (
      <Button variant={buttonVariant} size={size === 'default' ? 'lg' : size} disabled className={className}>
        <Bookmark className="h-5 w-5" />
      </Button>
    ) : null;
  }

  if (user?.role === 'WORKER') return null;

  const label = saved ? 'Saved' : 'Save';
  const Icon = saved ? BookmarkCheck : Bookmark;

  if (variant === 'icon') {
    return (
      <Button
        type="button"
        variant={buttonVariant}
        size={size === 'default' ? 'lg' : size}
        className={cn(saved && 'border-[var(--home-amber)]/40 text-[var(--home-amber)]', className)}
        disabled={loading}
        onClick={toggle}
        aria-label={saved ? 'Saved' : 'Save worker'}
        title={saved ? 'Saved' : 'Save worker'}
      >
        <Icon className={cn('h-5 w-5', saved && 'fill-[var(--home-amber)]/20')} />
      </Button>
    );
  }

  return (
    <Button
      type="button"
      variant={buttonVariant}
      size={size}
      className={cn('gap-2', saved && 'border-[var(--home-amber)]/40 text-[var(--home-amber)]', className)}
      disabled={loading}
      onClick={toggle}
    >
      <Icon className={cn('h-4 w-4', saved && 'fill-[var(--home-amber)]/20')} />
      {loading ? 'Saving...' : label}
    </Button>
  );
}