import { useState, useEffect } from 'react';
import { toast } from 'sonner';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { useClient } from 'hooks/useClient';

type ApifyConfigData = {
  apiToken: string;
};

type ApifyStatus = {
  configured: boolean;
};

export const ApifyConfig = () => {
  const client = useClient();
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [apiToken, setApiToken] = useState('');
  const [status, setStatus] = useState<ApifyStatus | null>(null);

  useEffect(() => {
    Promise.all([
      client.get<ApifyConfigData>('/integrations/apify/config').then((data) => {
        if (data?.apiToken) setApiToken(data.apiToken);
      }),
      client.get<ApifyStatus>('/integrations/apify/status').then(setStatus),
    ])
      .catch(() => {})
      .finally(() => setIsLoading(false));
  }, []);

  const handleSave = async () => {
    if (isSaving) return;
    setIsSaving(true);
    try {
      await client.put('/integrations/apify/config', { apiToken: apiToken.trim() });
      toast.success('Apify API token saved');
      setStatus({ configured: !!apiToken.trim() });
    } catch {
      toast.error('Failed to save Apify API token');
    } finally {
      setIsSaving(false);
    }
  };

  if (isLoading) return null;

  return (
    <div className="grid gap-5">
      {status && (
        <div className="flex items-center gap-2 rounded-lg border border-duck-dark/10 dark:border-foreground/10 p-3">
          <div className={`h-2.5 w-2.5 rounded-full shrink-0 ${status.configured ? 'bg-green-500' : 'bg-duck-dark/20 dark:bg-foreground/20'}`} />
          <span className="text-sm text-duck-dark dark:text-foreground">
            {status.configured ? 'API token configured' : 'Not configured'}
          </span>
        </div>
      )}

      <div className="grid gap-5">
        <Label className="grid gap-2">
          <span className="text-duck-dark/70 dark:text-foreground/70">API Token</span>
          <Input
            className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
            type="password"
            value={apiToken}
            onChange={(ev) => setApiToken(ev.target.value)}
            placeholder="apify_api_..."
          />
          <span className="text-xs text-duck-dark/40 dark:text-foreground/40">
            Get your token at{' '}
            <a href="https://console.apify.com/account/integrations" target="_blank" rel="noopener noreferrer" className="text-duck-teal underline">
              console.apify.com/account/integrations
            </a>
          </span>
        </Label>

        <Button
          type="button"
          onClick={handleSave}
          disabled={isSaving || !apiToken.trim()}
          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 disabled:opacity-50 disabled:hover:scale-100"
        >
          {isSaving ? 'Saving...' : 'Save'}
        </Button>
      </div>
    </div>
  );
};