'use client';

import { useState } from 'react';

type Status = 'ACTIVE' | 'DISCONNECTED' | 'BANNED' | 'PAIRING';

interface BotSummary {
  id: string;
  jid: string | null;
  displayName: string | null;
  status: Status;
}

export function BotSettingsCard({ initial }: { initial: { bot: BotSummary | null; shared: boolean; sharedBotId?: string } }) {
  const [bot, setBot] = useState<BotSummary | null>(initial.bot);
  const [revealedJid, setRevealedJid] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  async function onReveal() {
    setError(null);
    const res = await fetch('/api/bot/reveal', {
      method: 'POST',
      credentials: 'include',
    });
    if (res.ok) {
      const data = (await res.json()) as { jid: string };
      setRevealedJid(data.jid);
    } else {
      setError('Reveal failed');
    }
  }

  if (!bot) {
    return (
      <div className="rounded-lg border border-gray-200 p-6 bg-white">
        <h2 className="text-lg font-medium mb-2">Bot</h2>
        <p className="text-sm text-gray-600">
          No bot assigned yet. Contact your platform administrator to get one assigned.
        </p>
      </div>
    );
  }

  return (
    <div className="rounded-lg border border-gray-200 p-6 bg-white">
      <div className="flex items-center justify-between mb-3">
        <h2 className="text-lg font-medium">Bot</h2>
        <span
          className={`text-xs px-2 py-1 rounded ${
            bot.status === 'ACTIVE'
              ? 'bg-green-100 text-green-800'
              : bot.status === 'PAIRING'
                ? 'bg-yellow-100 text-yellow-800'
                : 'bg-red-100 text-red-800'
          }`}
        >
          {bot.status}
        </span>
      </div>
      <dl className="text-sm space-y-1 mb-4">
        <div>
          <dt className="inline font-medium">Number: </dt>
          <dd className="inline">
            {revealedJid ?? (bot.jid ? '••••••••••' : '—')}
            {!revealedJid && bot.status === 'ACTIVE' && (
              <button
                type="button"
                onClick={onReveal}
                className="ml-2 text-xs text-blue-600 underline"
              >
                Reveal
              </button>
            )}
          </dd>
        </div>
        <div>
          <dt className="inline font-medium">Display name: </dt>
          <dd className="inline">{bot.displayName ?? '—'}</dd>
        </div>
      </dl>
      <p className="text-xs text-gray-400">
        Bot is assigned by the platform administrator. Contact support to change or remove it.
      </p>
      {error && <p className="text-sm text-red-600 mt-2">{error}</p>}
    </div>
  );
}