import {
  AUTH_ENVIRONMENT_TARGETS,
  type AuthEnvironment,
} from "athena-auth-js";
import { Button } from "../ui/button";
import { Combobox, type ComboOption } from "../ui/combobox";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../ui/select";

type AuthEnvironmentControlsProps = {
  environment: AuthEnvironment;
  onEnvironmentChange: (value: AuthEnvironment) => void;
  email: string;
  onEmailChange: (value: string) => void;
  emailOptions: ComboOption[];
  trustedOriginsConfig: string;
  onTrustedOriginsConfigChange: (value: string) => void;
  trustedOriginsMessage: string | null;
  trustedOriginsLoading: boolean;
  onLoadRuntimeConfig: () => void;
  onAddCurrentOrigin: () => void;
  onCopyTrustedOriginsEnv: () => void;
  tenantId: string;
  onTenantIdChange: (value: string) => void;
  tenantHeaderName: string;
  onTenantHeaderNameChange: (value: string) => void;
  onApplyTenantSelection: () => void;
  tenantSelectionMessage: string | null;
};

export function AuthEnvironmentControls({
  environment,
  onEnvironmentChange,
  email,
  onEmailChange,
  emailOptions,
  trustedOriginsConfig,
  onTrustedOriginsConfigChange,
  trustedOriginsMessage,
  trustedOriginsLoading,
  onLoadRuntimeConfig,
  onAddCurrentOrigin,
  onCopyTrustedOriginsEnv,
  tenantId,
  onTenantIdChange,
  tenantHeaderName,
  onTenantHeaderNameChange,
  onApplyTenantSelection,
  tenantSelectionMessage,
}: AuthEnvironmentControlsProps) {
  return (
    <section className="grid w-full gap-3 rounded-2xl border border-slate-200/70 bg-gradient-to-br from-slate-50 via-white to-cyan-50/30 p-4 shadow-sm md:grid-cols-2">
      <div className="grid gap-2">
        <Label>Environment</Label>
        <Select
          value={environment}
          onValueChange={(value) => {
            if (value in AUTH_ENVIRONMENT_TARGETS) {
              onEnvironmentChange(value as AuthEnvironment);
            }
          }}
        >
          <SelectTrigger>
            <SelectValue placeholder="Select target" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="proxy">Proxy (recommended)</SelectItem>
            <SelectItem value="local-4000">Local (localhost:4000)</SelectItem>
            <SelectItem value="local-3000">Local (localhost:3000)</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div className="grid gap-2">
        <Label>Preset emails</Label>
        <Combobox
          value={email}
          onChange={onEmailChange}
          options={emailOptions}
          placeholder="Pick a preset email"
        />
      </div>
      <div className="grid gap-2 md:col-span-2">
        <Label>TRUSTED_ORIGINS (Rust server .env)</Label>
        <Input
          value={trustedOriginsConfig}
          onChange={(e) => onTrustedOriginsConfigChange(e.target.value)}
          placeholder="http://localhost:3001,http://localhost:4000"
        />
        <div className="flex flex-wrap gap-2 py-1">
          <Button
            type="button"
            variant="secondary"
            onClick={onLoadRuntimeConfig}
            disabled={trustedOriginsLoading}
          >
            {trustedOriginsLoading ? "Loading config..." : "Load runtime config"}
          </Button>
          <Button type="button" variant="secondary" onClick={onAddCurrentOrigin}>
            Add current origin
          </Button>
          <Button type="button" variant="secondary" onClick={onCopyTrustedOriginsEnv}>
            Copy .env line
          </Button>
        </div>
        {trustedOriginsMessage ? (
          <p className="text-xs text-slate-600">{trustedOriginsMessage}</p>
        ) : null}
      </div>
      <div className="grid gap-2 md:col-span-2">
        <Label>Tenant routing context</Label>
        <div className="grid gap-2 md:grid-cols-2">
          <Input
            value={tenantId}
            onChange={(e) => onTenantIdChange(e.target.value)}
            placeholder="default"
          />
          <Input
            value={tenantHeaderName}
            onChange={(e) => onTenantHeaderNameChange(e.target.value)}
            placeholder="x-athena-tenant"
          />
        </div>
        <div className="flex flex-wrap gap-2 py-1">
          <Button type="button" variant="secondary" onClick={onApplyTenantSelection}>
            Apply tenant context
          </Button>
        </div>
        <p className="text-xs text-slate-600">
          Stored in local storage and cookie, then forwarded by the Next.js `/api/auth` proxy.
        </p>
        {tenantSelectionMessage ? (
          <p className="text-xs text-slate-600">{tenantSelectionMessage}</p>
        ) : null}
      </div>
    </section>
  );
}
