"use client"

import { ExternalLink } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

const PROTON_BRIDGE_DOWNLOAD = "https://proton.me/mail/bridge"

export function ProtonBridgeWizard({
  email,
  imapPort,
  smtpPort,
  bridgePassword,
  onBridgePasswordChange,
  onImapPortChange,
  onSmtpPortChange,
  onContinue,
  onBack,
}: {
  email: string
  imapPort: string
  smtpPort: string
  bridgePassword: string
  onBridgePasswordChange: (v: string) => void
  onImapPortChange: (v: string) => void
  onSmtpPortChange: (v: string) => void
  onContinue: () => void
  onBack: () => void
}) {
  return (
    <div className="space-y-4 max-w-xl">
      <div className="rounded-lg border border-border bg-muted/30 p-4 space-y-3 text-sm">
        <p className="font-medium">Proton Mail via Bridge</p>
        <ol className="list-decimal list-inside space-y-2 text-muted-foreground">
          <li>
            Installez{" "}
            <a
              href={PROTON_BRIDGE_DOWNLOAD}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-1 text-foreground underline"
            >
              Proton Mail Bridge
              <ExternalLink className="size-3" />
            </a>{" "}
            sur cet ordinateur.
          </li>
          <li>
            Connectez-vous avec <span className="text-foreground">{email}</span>.
          </li>
          <li>Copiez le mot de passe Bridge généré pour IMAP/SMTP.</li>
          <li>Vérifiez que Bridge écoute sur localhost (ports par défaut ci-dessous).</li>
        </ol>
      </div>

      <div className="grid gap-3 sm:grid-cols-2">
        <Field label="IMAP port (Bridge)" value={imapPort} onChange={onImapPortChange} />
        <Field label="SMTP port (Bridge)" value={smtpPort} onChange={onSmtpPortChange} />
        <div className="sm:col-span-2">
          <Field
            label="Mot de passe Bridge"
            type="password"
            value={bridgePassword}
            onChange={onBridgePasswordChange}
            placeholder="Généré par Proton Bridge"
          />
        </div>
      </div>

      <p className="text-xs text-muted-foreground">
        Bridge doit rester ouvert en arrière-plan. Ultimail se connecte à{" "}
        <code className="text-foreground">127.0.0.1</code>.
      </p>

      <div className="flex gap-2">
        <Button type="button" disabled={!bridgePassword} onClick={onContinue}>
          Tester et continuer
        </Button>
        <Button type="button" variant="ghost" onClick={onBack}>
          Retour
        </Button>
      </div>
    </div>
  )
}

function Field({
  label,
  value,
  onChange,
  type = "text",
  placeholder,
}: {
  label: string
  value: string
  onChange: (v: string) => void
  type?: string
  placeholder?: string
}) {
  return (
    <div className="space-y-1.5">
      <Label className="text-xs">{label}</Label>
      <Input
        value={value}
        type={type}
        placeholder={placeholder}
        onChange={(e) => onChange(e.target.value)}
      />
    </div>
  )
}