import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { RecaptchaState, RecaptchaLocation, recaptchaLocations } from "../../config"

interface LocationsTabProps {
  settings: RecaptchaState
  toggleLocation: (locationId: RecaptchaLocation) => void
}

export function LocationsTab({ settings, toggleLocation }: LocationsTabProps) {
  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Protected Pages</CardTitle>
          <CardDescription>
            Select which pages should be protected by reCAPTCHA
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 md:grid-cols-2">
            {recaptchaLocations.map((location) => {
              const locationKey = location.id as RecaptchaLocation
              const isChecked = settings.locations[locationKey] || false
              
              return (
                <div
                  key={location.id}
                  className={`
                    relative flex items-start gap-4 rounded-lg border p-4 transition-colors
                    ${isChecked ? 'border-primary bg-primary/5' : 'border-muted hover:border-muted-foreground/50'}
                  `}
                >
                  <Checkbox
                    id={location.id}
                    checked={isChecked}
                    onCheckedChange={() => toggleLocation(locationKey)}
                    className="mt-1"
                  />
                  <div className="flex-1 space-y-1">
                    <div className="flex items-center gap-2">
                      <Label 
                        htmlFor={location.id} 
                        className="font-medium cursor-pointer"
                      >
                        {location.name}
                      </Label>
                      {location.requiresWooCommerce && (
                        <Badge variant="outline" className="text-xs">
                          WooCommerce
                        </Badge>
                      )}
                    </div>
                    <p className="text-sm text-muted-foreground">
                      {location.description}
                    </p>
                  </div>
                </div>
              )
            })}
          </div>
        </CardContent>
      </Card>

      {/* Help Text */}
      <Card className="bg-muted/50">
        <CardContent className="p-4">
          <h4 className="font-medium mb-2">How it works</h4>
          <ul className="text-sm text-muted-foreground space-y-1">
            <li>• reCAPTCHA will be automatically added to the selected forms</li>
            <li>• Failed verifications will block form submission</li>
            <li>• Users will see an error message if verification fails</li>
            <li>• WooCommerce pages require WooCommerce to be installed and active</li>
          </ul>
        </CardContent>
      </Card>
    </div>
  )
}