import { useState, useEffect } from 'react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { useClient } from 'hooks/useClient';
import { useTranslation } from '@/lib/i18n';

type GoogleStatus = {
  connected: boolean;
  email: string | null;
  picture: string | null;
  configured: boolean;
};

export const GoogleAccount = () => {
  const { t } = useTranslation();
  const client = useClient();
  const [isLoading, setIsLoading] = useState(true);
  const [status, setStatus] = useState<GoogleStatus>({
    connected: false,
    email: null,
    picture: null,
    configured: false,
  });

  useEffect(() => {
    client
      .get<GoogleStatus>('/integrations/google/status')
      .then(setStatus)
      .catch(() => {})
      .finally(() => setIsLoading(false));

    const params = new URLSearchParams(window.location.search);
    const result = params.get('google');
    if (result === 'success') {
      toast.success(t('settings.googleAccount.connectedToast'));
    } else if (result === 'error') {
      toast.error(t('settings.googleAccount.connectFailed'));
    }
    if (result) {
      window.history.replaceState({}, '', window.location.pathname);
    }
  }, []);

  const handleConnect = () => {
    const params = new URLSearchParams({
      token: client.token ?? '',
      origin: window.location.origin,
    });
    window.location.href = `/api/integrations/google/authorize?${params.toString()}`;
  };

  const handleDisconnect = async () => {
    try {
      await client.delete('/integrations/google/connection');
      setStatus({ ...status, connected: false, email: null });
      toast.success(t('settings.googleAccount.disconnectedToast'));
    } catch {
      toast.error(t('settings.googleAccount.disconnectFailed'));
    }
  };

  if (isLoading) return null;
  if (!status.configured) return null;

  return (
    <div className="grid gap-4">
      <div>
        <p className="text-sm font-medium text-duck-dark dark:text-foreground">{t('settings.googleAccount.title')}</p>
        <p className="text-xs text-duck-dark/50 dark:text-foreground/50 mt-1">{t('settings.googleAccount.hint')}</p>
      </div>
      {status.connected ? (
        <>
          <div className="flex items-center gap-3 rounded-lg border border-duck-dark/10 dark:border-foreground/10 p-4">
            <div className="h-2.5 w-2.5 rounded-full bg-success shrink-0" />
            <div className="min-w-0 flex-1">
              <p className="text-sm font-medium text-duck-dark dark:text-foreground">
                {t('settings.googleAccount.connected')}
              </p>
              <p className="text-xs text-duck-dark/50 dark:text-foreground/50 truncate">{status.email}</p>
            </div>
            {status.picture && (
              <img src={status.picture} alt="" className="h-9 w-9 rounded-full shrink-0" referrerPolicy="no-referrer" />
            )}
          </div>
          <Button type="button" variant="outline" onClick={handleDisconnect} className="w-full h-11 cursor-pointer">
            {t('settings.googleAccount.disconnect')}
          </Button>
        </>
      ) : (
        <Button
          type="button"
          onClick={handleConnect}
          className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer"
        >
          {t('settings.googleAccount.connect')}
        </Button>
      )}
    </div>
  );
};