import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { SettingsGrid } from "@/components/settings-layout"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Globe, AlertTriangle } from "lucide-react"
import { GeoSettings } from "../../types"

interface AdvancedTabProps {
  geoSettings: GeoSettings
  updateGeoSettings: <K extends keyof GeoSettings>(key: K, value: GeoSettings[K]) => void
}

export function AdvancedTab({
  geoSettings,
  updateGeoSettings
}: AdvancedTabProps) {
  return (
    <SettingsGrid>
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Globe className="h-5 w-5" />
            Geo Targeting
          </CardTitle>
          <CardDescription>
            Show the cookie notice only to visitors from specific regions
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="flex items-center gap-3">
            <Switch
              id="geoEnabled"
              checked={geoSettings.enabled}
              onCheckedChange={(checked) => updateGeoSettings('enabled', checked)}
            />
            <Label htmlFor="geoEnabled" className="cursor-pointer">
              Enable geo-targeting
            </Label>
          </div>

          {geoSettings.enabled && (
            <div className="space-y-4 pt-4 border-t">
              <div className="flex items-center gap-3">
                <Switch
                  id="showOnlyInEU"
                  checked={geoSettings.showOnlyInEU}
                  onCheckedChange={(checked) => {
                    updateGeoSettings('showOnlyInEU', checked)
                    if (checked) updateGeoSettings('showOnlyInGDPRCountries', false)
                  }}
                />
                <div>
                  <Label htmlFor="showOnlyInEU" className="cursor-pointer">
                    Show only to EU visitors
                  </Label>
                  <p className="text-xs text-muted-foreground">
                    EU member states only
                  </p>
                </div>
              </div>

              <div className="flex items-center gap-3">
                <Switch
                  id="showOnlyInGDPR"
                  checked={geoSettings.showOnlyInGDPRCountries}
                  onCheckedChange={(checked) => {
                    updateGeoSettings('showOnlyInGDPRCountries', checked)
                    if (checked) updateGeoSettings('showOnlyInEU', false)
                  }}
                />
                <div>
                  <Label htmlFor="showOnlyInGDPR" className="cursor-pointer">
                    Show only to EU, EEA, and UK visitors
                  </Label>
                  <p className="text-xs text-muted-foreground">
                    Includes EU member states, Iceland, Liechtenstein, Norway, and the United Kingdom
                  </p>
                </div>
              </div>

              <div className="flex items-start gap-2 p-3 rounded-lg bg-amber-50 border border-amber-200">
                <AlertTriangle className="h-5 w-5 text-amber-600 mt-0.5 flex-shrink-0" />
                <div className="text-sm text-amber-800">
                  <strong>Note:</strong> Geo-targeting uses WooCommerce geolocation. Sites whose origin accepts traffic only through Cloudflare can opt in to its headers with the <code>swift_commerce_gdpr_trust_cloudflare_headers</code> filter. Location results may not be 100% accurate.
                  For maximum compliance, consider showing the notice to all visitors.
                </div>
              </div>
            </div>
          )}
        </CardContent>
      </Card>
    </SettingsGrid>
  )
}