// Setup screen — centered card-based first-run setup wizard, shell-less.
// Shows either the initial admin account creation form or a post-setup confirmation state.
(function () {
  const NS = window.ChicoryTVDesignSystem_eb3b61;
  const { Button, Card, Input } = NS;
  const Ico = window.Ico;

  function Setup() {
    const [state, setState] = React.useState('form'); // 'form' or 'already-configured'
    const [username, setUsername] = React.useState('');
    const [password, setPassword] = React.useState('');
    const [confirm, setConfirm] = React.useState('');
    const [error, setError] = React.useState(null);

    const passwordsMatch = password.length > 0 && password === confirm;
    const canSubmit = username.trim().length > 0 && passwordsMatch;

    const handleSubmit = (e) => {
      e.preventDefault();
      if (canSubmit) {
        // Mock: simulate setup success
        setState('form'); // Keep on form for mockup (would normally hand off to app)
      }
    };

    const handleUsernameChange = (e) => {
      setUsername(e.target.value);
      setError(null);
    };

    const handlePasswordChange = (e) => {
      setPassword(e.target.value);
      setError(null);
    };

    const handleConfirmChange = (e) => {
      setConfirm(e.target.value);
      setError(null);
    };

    return (
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          height: '100%',
          padding: '24px',
          background: 'var(--ctv-bg)',
        }}
      >
        {state === 'form' ? (
          <Card
            padded
            title="Welcome to ChicoryTV"
            subtitle="Create the first administrator account"
            style={{ maxWidth: 420, width: '100%' }}
          >
            <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Input
                label="Username"
                value={username}
                onChange={handleUsernameChange}
                placeholder="Choose a username"
                leadingIcon={<Ico n="User" s={14} />}
              />
              <Input
                label="Password"
                value={password}
                onChange={handlePasswordChange}
                placeholder="Choose a password"
                type="password"
                leadingIcon={<Ico n="KeyRound" s={14} />}
              />
              <Input
                label="Confirm password"
                value={confirm}
                onChange={handleConfirmChange}
                placeholder="Re-enter the password"
                type="password"
                leadingIcon={<Ico n="KeyRound" s={14} />}
                error={confirm.length > 0 && !passwordsMatch ? 'Passwords do not match.' : null}
              />

              {error && (
                <div
                  role="alert"
                  style={{
                    marginTop: 12,
                    padding: '10px 12px',
                    borderRadius: 'var(--radius-sm)',
                    background: 'var(--ctv-error-soft)',
                    font: 'var(--text-sm)/1.4 var(--font-sans)',
                    color: 'var(--status-error)',
                  }}
                >
                  {error}
                </div>
              )}

              <div style={{ marginTop: 18 }}>
                <Button
                  type="submit"
                  variant="primary"
                  fullWidth
                  disabled={!canSubmit}
                  startIcon={<Ico n="UserPlus" s={14} />}
                >
                  Create account
                </Button>
              </div>
            </form>
          </Card>
        ) : (
          <Card
            padded
            title="Already configured"
            style={{ maxWidth: 420, width: '100%' }}
          >
            <div
              role="alert"
              style={{
                padding: '12px',
                borderRadius: 'var(--radius-sm)',
                background: 'var(--ctv-warn-soft)',
                font: 'var(--text-sm)/1.4 var(--font-sans)',
                color: 'var(--status-warn)',
                marginBottom: 16,
              }}
            >
              This server has already been set up. Reload to sign in.
            </div>
            <Button
              variant="primary"
              fullWidth
              startIcon={<Ico n="RotateCcw" s={14} />}
            >
              Reload
            </Button>
          </Card>
        )}
      </div>
    );
  }

  window.CTVSetup = Setup;
})();
