import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { SettingsGrid } from "@/components/settings-layout"
import { ExternalLink } from "lucide-react"
import {
  autoDeleteOptions,
  EmailVerificationSettings,
  expiryOptions,
  resendLimitOptions,
  verificationModeOptions,
} from "../../config"

interface AdvancedTabProps {
  settings: EmailVerificationSettings
  updateSettings: <K extends keyof EmailVerificationSettings>(key: K, value: EmailVerificationSettings[K]) => void
}

export function AdvancedTab({ settings, updateSettings }: AdvancedTabProps) {
  return (
    <SettingsGrid>
      <Card>
        <CardHeader>
          <CardTitle>Verification Mode</CardTitle>
          <CardDescription>Choose between link verification and manual approval.</CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          {verificationModeOptions.map((mode) => {
            const selected = settings.verificationMode === mode.value
            return (
              <button
                type="button"
                key={mode.value}
                className={`w-full rounded-lg border p-4 text-left transition-colors ${selected ? "border-primary bg-primary/5" : "hover:border-muted-foreground/50"}`}
                onClick={() => updateSettings("verificationMode", mode.value as EmailVerificationSettings["verificationMode"])}
              >
                <span className="font-medium text-sm">{mode.label}</span>
                <span className="block text-sm text-muted-foreground">{mode.description}</span>
              </button>
            )
          })}
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Checkout Enforcement</CardTitle>
          <CardDescription>Apply verification to classic checkout and Checkout Blocks.</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex items-center justify-between rounded-lg border p-4">
            <div>
              <Label className="text-base font-medium">Logged-in Checkout</Label>
              <p className="text-sm text-muted-foreground">Require tracked users to verify before placing an order.</p>
            </div>
            <Switch checked={settings.enableForLoggedInCheckout} onCheckedChange={(value) => updateSettings("enableForLoggedInCheckout", value)} />
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Links, Resends & Retention</CardTitle>
          <CardDescription>Control link lifetime, administrative resends, and pending-account cleanup.</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="grid gap-2">
            <Label>Verification Link Expiry</Label>
            <Select value={settings.linkExpiry} onValueChange={(value) => updateSettings("linkExpiry", value)}>
              <SelectTrigger className="max-w-xs"><SelectValue /></SelectTrigger>
              <SelectContent>{expiryOptions.map((option) => <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>)}</SelectContent>
            </Select>
          </div>
          <div className="grid gap-2">
            <Label>Administrative Resend Limit</Label>
            <Select value={settings.resendLimit} onValueChange={(value) => updateSettings("resendLimit", value)}>
              <SelectTrigger className="max-w-xs"><SelectValue /></SelectTrigger>
              <SelectContent>{resendLimitOptions.map((option) => <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>)}</SelectContent>
            </Select>
          </div>
          <div className="grid gap-2">
            <Label>Auto-delete Unverified Users</Label>
            <Select value={settings.autoDeleteAfter} onValueChange={(value) => updateSettings("autoDeleteAfter", value)}>
              <SelectTrigger className="max-w-xs"><SelectValue /></SelectTrigger>
              <SelectContent>{autoDeleteOptions.map((option) => <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>)}</SelectContent>
            </Select>
          </div>
          <div className="grid gap-2">
            <Label htmlFor="email-verification-redirect" className="flex items-center gap-2"><ExternalLink className="h-4 w-4" />Redirect After Verification</Label>
            <Input
              id="email-verification-redirect"
              type="url"
              className="max-w-md"
              placeholder="Same-site URL; leave empty for the account login page"
              value={settings.redirectAfterVerification}
              onChange={(event) => updateSettings("redirectAfterVerification", event.target.value)}
            />
          </div>
        </CardContent>
      </Card>
    </SettingsGrid>
  )
}