import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { SettingsGrid } from "@/components/settings-layout"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Slider } from "@/components/ui/slider"
import { Clock, MousePointer, Settings } from "lucide-react"
import { BehaviorSettings } from "../../types"

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

export function BehaviorTab({ settings, updateSettings }: BehaviorTabProps) {
  return (
    <SettingsGrid>
      {/* Display Timing */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Clock className="h-5 w-5" />
            Display Timing
          </CardTitle>
          <CardDescription>
            Control when and how the popup appears
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-4">
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label>Show Delay</Label>
                <span className="text-sm text-muted-foreground">
                  {settings.showDelay === 0 ? 'Immediately' : `${settings.showDelay} seconds`}
                </span>
              </div>
              <Slider
                value={[settings.showDelay]}
                onValueChange={([value]) => updateSettings('showDelay', value)}
                max={10}
                step={1}
              />
              <p className="text-xs text-muted-foreground">
                Delay before showing the popup after page load
              </p>
            </div>
          </div>

          <div className="flex flex-wrap gap-6 pt-4 border-t">
            <div className="flex items-center gap-3">
              <Switch
                id="autoHide"
                checked={settings.autoHide}
                onCheckedChange={(checked) => updateSettings('autoHide', checked)}
              />
              <Label htmlFor="autoHide" className="cursor-pointer">
                Auto-hide after acceptance
              </Label>
            </div>

            {settings.autoHide && (
              <div className="flex items-center gap-2">
                <Label className="text-sm">Hide after</Label>
                <Input
                  type="number"
                  min={1}
                  max={10}
                  value={settings.autoHideDelay}
                  onChange={(e) => updateSettings('autoHideDelay', parseInt(e.target.value) || 3)}
                  className="w-16"
                />
                <span className="text-sm text-muted-foreground">seconds</span>
              </div>
            )}
          </div>
        </CardContent>
      </Card>

      {/* Interaction */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <MousePointer className="h-5 w-5" />
            User Interaction
          </CardTitle>
          <CardDescription>
            Control how users interact with the popup
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="flex flex-wrap gap-6">
            <div className="flex items-center gap-3">
              <Switch
                id="blockScroll"
                checked={settings.blockPageScroll}
                onCheckedChange={(checked) => updateSettings('blockPageScroll', checked)}
              />
              <div>
                <Label htmlFor="blockScroll" className="cursor-pointer">
                  Block page scroll
                </Label>
                <p className="text-xs text-muted-foreground">
                  Prevent scrolling until consent is given
                </p>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <Switch
                id="closeOnScroll"
                checked={settings.closeOnScroll}
                onCheckedChange={(checked) => updateSettings('closeOnScroll', checked)}
              />
              <div>
                <Label htmlFor="closeOnScroll" className="cursor-pointer">
                  Accept on scroll
                </Label>
                <p className="text-xs text-muted-foreground">
                  Not recommended - may not be GDPR compliant
                </p>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <Switch
                id="closeOnClickOutside"
                checked={settings.closeOnClickOutside}
                onCheckedChange={(checked) => updateSettings('closeOnClickOutside', checked)}
              />
              <div>
                <Label htmlFor="closeOnClickOutside" className="cursor-pointer">
                  Close on click outside
                </Label>
                <p className="text-xs text-muted-foreground">
                  Allow dismissing by clicking outside
                </p>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Consent Settings */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Settings className="h-5 w-5" />
            Consent Settings
          </CardTitle>
          <CardDescription>
            Configure consent storage and renewal
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label>Cookie Expiry (days)</Label>
              <Input
                type="number"
                min={1}
                max={730}
                value={settings.cookieExpiry}
                onChange={(e) => updateSettings('cookieExpiry', parseInt(e.target.value) || 365)}
              />
              <p className="text-xs text-muted-foreground">
                How long to remember user's consent (max 2 years for GDPR)
              </p>
            </div>

            <div className="space-y-2">
              <Label>Policy Version</Label>
              <Input
                value={settings.policyVersion}
                onChange={(e) => updateSettings('policyVersion', e.target.value)}
                placeholder="1.0"
              />
              <p className="text-xs text-muted-foreground">
                Used to track policy updates
              </p>
            </div>
          </div>

          <div className="flex flex-wrap gap-6 pt-4 border-t">
            <div className="flex items-center gap-3">
              <Switch
                id="respectDNT"
                checked={settings.respectDoNotTrack}
                onCheckedChange={(checked) => updateSettings('respectDoNotTrack', checked)}
              />
              <div>
                <Label htmlFor="respectDNT" className="cursor-pointer">
                  Respect Do Not Track
                </Label>
                <p className="text-xs text-muted-foreground">
                  Honor browser's DNT setting
                </p>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <Switch
                id="reaskAfterUpdate"
                checked={settings.reaskAfterUpdate}
                onCheckedChange={(checked) => updateSettings('reaskAfterUpdate', checked)}
              />
              <div>
                <Label htmlFor="reaskAfterUpdate" className="cursor-pointer">
                  Re-ask after policy update
                </Label>
                <p className="text-xs text-muted-foreground">
                  Show popup again when policy version changes
                </p>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <Switch
                id="reaskAfterDecline"
                checked={settings.reaskAfterDecline}
                onCheckedChange={(checked) => updateSettings('reaskAfterDecline', checked)}
              />
              <div>
                <Label htmlFor="reaskAfterDecline" className="cursor-pointer">
                  Re-ask after decline
                </Label>
                <p className="text-xs text-muted-foreground">
                  Show popup again after user declines
                </p>
              </div>
            </div>
          </div>

          {settings.reaskAfterDecline && (
            <div className="space-y-2">
              <Label>Re-ask after (days)</Label>
              <div className="flex items-center gap-2">
                <Input
                  type="number"
                  min={1}
                  max={30}
                  value={settings.reaskAfterDeclineDays}
                  onChange={(e) => updateSettings('reaskAfterDeclineDays', parseInt(e.target.value) || 7)}
                  className="w-24"
                />
                <span className="text-sm text-muted-foreground">days after user declines</span>
              </div>
            </div>
          )}
        </CardContent>
      </Card>
    </SettingsGrid>
  )
}