import { SettingsPane } from './SettingsPane'
import { SettingsSection } from './SettingsSection'

/**
 * Ustawienia wideo instancji.
 *
 * TO JEST MIEJSCE DLA TECHNIKA, NIE DLA OSOBY ZAKLADAJACEJ WEBINAR.
 * ---------------------------------------------------------------------------
 * Klucze dostawcow (LiveKit, Zoom, Jitsi) i sekret webhooka ustawia sie tutaj
 * RAZ, przy wdrozeniu instancji u klienta. Osoba tworzaca webinar nigdy tego
 * nie dotyka: w formularzu webinaru wybiera tylko gotowego dostawce z listy
 * i klika "Utworz pokoj". Dlatego instrukcja techniczna jest tutaj, a nie
 * przy webinarze.
 *
 * Wczesniej tych kluczy NIE DALO SIE ustawic przez panel (byly wylacznie
 * w bazie/zmiennych srodowiskowych), a instrukcja "?" przy webinarze mylila,
 * bo odsylala do nieistniejacej sekcji Wideo. Ta strona domyka te luke.
 */

const KEYS = [
  'VIDEO_PROVIDER',
  'VIDEO_WEBHOOK_SECRET',
  'VIDEO_DELETE_AFTER_DOWNLOAD',
  // LiveKit
  'LIVEKIT_URL',
  'LIVEKIT_API_KEY',
  'LIVEKIT_API_SECRET',
  // Jitsi
  'JITSI_DOMAIN',
  'JITSI_JWT_ENABLED',
  'JITSI_APP_ID',
  'JITSI_APP_SECRET',
  // Zoom
  'ZOOM_ACCOUNT_ID',
  'ZOOM_CLIENT_ID',
  'ZOOM_CLIENT_SECRET',
  'ZOOM_SDK_KEY',
  'ZOOM_SDK_SECRET',
]

export function VideoSettingsPage() {
  return (
    <SettingsPane>
      {({ settings, onSave, saving }) => (
        <SettingsSection
          title="Wideo (konfiguracja instancji)"
          description="Dostawca wideo i jego klucze. Ustawia się raz, przy wdrożeniu. Osoba zakładająca webinar tego nie dotyka - wybiera tylko gotowego dostawcę z listy."
          settings={settings}
          keys={KEYS}
          onSave={onSave}
          saving={saving}
          intro={<VideoInstructions />}
        />
      )}
    </SettingsPane>
  )
}

/**
 * Instrukcja techniczna, ktora WCZESNIEJ byla w oknie "?" przy webinarze.
 * Jej miejsce jest tu: to jednorazowa konfiguracja infrastruktury.
 */
function VideoInstructions() {
  return (
    <details className="rounded-md border border-slate-200 bg-slate-25 p-4 text-sm">
      <summary className="cursor-pointer font-semibold text-slate-800">
        Jak skonfigurować dostawcę wideo (instrukcja dla administratora)
      </summary>
      <div className="mt-3 space-y-4 text-slate-600">
        <p>
          Wybierz jednego dostawcę w polu <strong>VIDEO_PROVIDER</strong> i uzupełnij jego klucze.
          Pozostali dostawcy mogą zostać puści. Po zapisaniu konfiguracji osoba zakładająca
          webinar wybiera dostawcę z gotowej listy i klika „Utwórz pokój" - bez żadnych kroków
          technicznych.
        </p>

        <div>
          <p className="font-semibold text-slate-800">LiveKit (zalecany)</p>
          <p>
            Serwer wideo uruchamiany na własnej infrastrukturze. Uprawnienia egzekwuje serwer na
            podstawie podpisanego tokenu, nagrywanie działa automatycznie.
          </p>
          <ol className="mt-1 list-decimal space-y-1 pl-5">
            <li>Uruchom serwer: profil Docker Compose „livekit" (<code>docker compose --profile livekit up -d</code>). Nagrywanie wymaga usług Redis i Egress z tego profilu.</li>
            <li>Wpisz parę klucz-sekret w <strong>LIVEKIT_API_KEY</strong> i <strong>LIVEKIT_API_SECRET</strong>.</li>
            <li>Podaj adres WebSocket serwera w <strong>LIVEKIT_URL</strong> (np. <code>wss://twoj-serwer</code>; lokalnie <code>ws://localhost:7880</code>).</li>
          </ol>
        </div>

        <div>
          <p className="font-semibold text-slate-800">Zoom</p>
          <p>Obraz osadzony w oknie webinaru. Wymaga płatnego konta Zoom (min. Pro) i dwóch aplikacji na koncie dewelopera.</p>
          <ol className="mt-1 list-decimal space-y-1 pl-5">
            <li>Na marketplace.zoom.us utwórz aplikację <strong>Server-to-Server OAuth</strong> - da Account ID, Client ID, Client Secret. Dodaj zakresy: meeting:write, meeting:read, recording:read, recording:write.</li>
            <li>Wpisz je w <strong>ZOOM_ACCOUNT_ID</strong>, <strong>ZOOM_CLIENT_ID</strong>, <strong>ZOOM_CLIENT_SECRET</strong>.</li>
            <li>Utwórz drugą aplikację <strong>Meeting SDK</strong> - da SDK Key i SDK Secret. Wpisz w <strong>ZOOM_SDK_KEY</strong> i <strong>ZOOM_SDK_SECRET</strong>.</li>
            <li>W Event Subscriptions dodaj adres <code>/api/webhooks/video/zoom</code> i zdarzenia: Recording Completed, Participant joined/left. Zoom poda Secret Token - wpisz go w <strong>VIDEO_WEBHOOK_SECRET</strong>.</li>
          </ol>
          <p className="mt-1">
            Uwaga: Zoom nie egzekwuje uprawnień do obrazu i dźwięku per uczestnik - steruje nimi na
            poziomie całego spotkania (jak Jitsi, nie jak LiveKit).
          </p>
        </div>

        <div>
          <p className="font-semibold text-slate-800">Jitsi Meet</p>
          <p>
            Publiczny <code>meet.jit.si</code> działa bez konta (<strong>JITSI_DOMAIN</strong>), ale pokój jest wtedy
            otwarty dla każdego, kto zna adres. Własny serwer z modułem JWT pozwala włączyć
            <strong> JITSI_JWT_ENABLED</strong> i wpisać <strong>JITSI_APP_ID</strong> oraz <strong>JITSI_APP_SECRET</strong>.
          </p>
        </div>

        <div>
          <p className="font-semibold text-slate-800">Bez wbudowanego wideo (NONE)</p>
          <p>
            Ustaw <strong>VIDEO_PROVIDER</strong> na NONE. Obraz idzie zewnętrznym narzędziem - link
            wkleja się w formularzu każdego webinaru. Czat, pytania i zapytania ofertowe zostają
            na tej platformie.
          </p>
        </div>
      </div>
    </details>
  )
}