import React, { useState } from 'react';
import { useSetIsLoginModalOpen } from '../contexts/UIContext';
import { ASSISTANT_BRAND_NAME } from '../constants';
import { useUpdatePluginSettings } from '../contexts/PluginSettingsContext';
import AssistantSettingsSection from './Modals/settings/AssistantSettingsSection';
import { BrandMark, Button } from './ui';

const InitialSetupGate: React.FC = () => {
  const setIsLoginModalOpen = useSetIsLoginModalOpen();
  const updatePluginSettings = useUpdatePluginSettings();
  const [isSaving, setIsSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // The permission toggles below persist live (shared with Settings → Permissions);
  // completing setup just records that the user has been through this screen.
  const handleSave = async () => {
    setError(null);
    setIsSaving(true);
    try {
      await updatePluginSettings({ setupCompleted: true });
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Failed to save setup.');
      setIsSaving(false);
    }
  };

  return (
    <div className="flex flex-1 items-center justify-center overflow-y-auto px-4 py-6 sm:px-6 sm:py-8">
      <div className="w-full max-w-2xl space-y-6 rounded-2xl border border-app-border bg-app-surface p-6 shadow-card sm:p-8">
        <div className="flex flex-col items-center text-center">
          <BrandMark size={52} />
          <h1 className="mt-4 text-2xl font-semibold text-app-text sm:text-3xl">
            {`Welcome to ${ASSISTANT_BRAND_NAME}`}
          </h1>
          <p className="mt-2 text-sm text-app-muted sm:text-base">
            {`Choose what ${ASSISTANT_BRAND_NAME} can access before you start. You can change these anytime in Settings → Permissions.`}
          </p>
        </div>

        {/* Reuses the same Permissions section shown in Settings. */}
        <AssistantSettingsSection />

        <div className="rounded-xl border border-warning/30 bg-warning/10 p-4">
          <p className="mb-1 text-sm font-semibold text-warning-text">
            With great power comes great responsibility.
          </p>
          <p className="text-sm leading-6 text-warning-text/90">
            {`${ASSISTANT_BRAND_NAME} is a helpful tool, but it can and does make mistakes. Review AI-generated output and any proposed changes carefully before publishing to a live site.`}
          </p>
        </div>

        {error && (
          <div className="rounded-lg border border-danger/25 bg-danger/10 p-3 text-sm text-danger-text">
            {error}
          </div>
        )}

        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <Button variant="ghost" onClick={() => setIsLoginModalOpen(true)}>
            Create free account
          </Button>
          <Button variant="primary" onClick={handleSave} disabled={isSaving}>
            {isSaving ? 'Saving…' : 'Get started'}
          </Button>
        </div>
      </div>
    </div>
  );
};

export default InitialSetupGate;