import Link from "next/link"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { businessConfig } from "@/lib/seo-config"

function PolicyLinks() {
  return (
    <>
      {" "}
      Review our{" "}
      <Link
        href="/privacy-policy"
        target="_blank"
        rel="noopener noreferrer"
        className="font-medium text-foreground underline underline-offset-4 hover:text-primary"
      >
        Privacy Policy
      </Link>
      {" "}and{" "}
      <Link
        href="/terms-and-conditions"
        target="_blank"
        rel="noopener noreferrer"
        className="font-medium text-foreground underline underline-offset-4 hover:text-primary"
      >
        Terms
      </Link>
      .
    </>
  )
}

type SmsConsentFieldsProps = {
  idPrefix: string
  marketingChecked: boolean
  marketingError?: string
  onMarketingChange: (checked: boolean) => void
  onServiceChange: (checked: boolean) => void
  serviceChecked: boolean
  serviceError?: string
}

export function SmsConsentFields({
  idPrefix,
  marketingChecked,
  marketingError,
  onMarketingChange,
  onServiceChange,
  serviceChecked,
  serviceError,
}: SmsConsentFieldsProps) {
  return (
    <div className="space-y-3">
      <div className="flex items-start gap-3 rounded-2xl border border-border/60 bg-background/90 px-4 py-3">
        <Checkbox
          id={`${idPrefix}-service-consent`}
          checked={serviceChecked}
          onCheckedChange={(checked) => onServiceChange(Boolean(checked))}
          className="mt-0.5"
        />
        <Label
          htmlFor={`${idPrefix}-service-consent`}
          className="text-xs leading-relaxed text-muted-foreground"
        >
          I agree to receive conversational SMS from {businessConfig.legalName} about my inquiry, scheduling,
          support, repairs, moving, and follow-up. Message frequency varies. Message and data rates may apply.
          Reply STOP to opt out and HELP for help. Consent is not a condition of purchase.
          <PolicyLinks />
        </Label>
      </div>
      {serviceError ? <p className="text-xs text-destructive">{serviceError}</p> : null}

      <div className="flex items-start gap-3 rounded-2xl border border-border/60 bg-background/90 px-4 py-3">
        <Checkbox
          id={`${idPrefix}-marketing-consent`}
          checked={marketingChecked}
          onCheckedChange={(checked) => onMarketingChange(Boolean(checked))}
          className="mt-0.5"
        />
        <Label
          htmlFor={`${idPrefix}-marketing-consent`}
          className="text-xs leading-relaxed text-muted-foreground"
        >
          I agree to receive promotional and marketing SMS from {businessConfig.legalName}. Message frequency
          varies. Message and data rates may apply. Reply STOP to opt out and HELP for help. Consent is not a
          condition of purchase.
          <PolicyLinks />
        </Label>
      </div>
      {marketingError ? <p className="text-xs text-destructive">{marketingError}</p> : null}
    </div>
  )
}