import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Switch } from "@/components/ui/switch"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { AbandonedCartSettings } from "../../types"
import { SettingsSection } from "@/components/ui/settings-section"

interface GeneralTabProps {
  settings: AbandonedCartSettings
  updateSettings: (updates: Partial<AbandonedCartSettings>) => void
}

export function GeneralTab({ settings, updateSettings }: GeneralTabProps) {
  return (
    <div className="w-full max-w-4xl space-y-6 [&_button[role=switch]]:shrink-0">
      <Card className="shadow-none">
        <CardHeader>
          <CardTitle role="heading" aria-level={2}>Cart Tracking</CardTitle>
          <CardDescription>
            Configure when a cart is considered abandoned and how long to retain records.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-6 sm:grid-cols-2">
          <div className="grid gap-2">
            <Label htmlFor="abandonmentThreshold">Abandonment Threshold (minutes)</Label>
            <Input
              id="abandonmentThreshold"
              type="number"
              min={15}
              max={1440}
              value={settings.abandonmentThreshold}
              onChange={(event) => updateSettings({ abandonmentThreshold: parseInt(event.target.value) || 60 })}
            />
            <p className="text-sm text-muted-foreground">
              A cart becomes abandoned after this period of inactivity. Minimum 15 minutes.
            </p>
          </div>

          <div className="grid gap-2">
            <Label htmlFor="cartExpirationDays">Cart Expiration (days)</Label>
            <Input
              id="cartExpirationDays"
              type="number"
              min={1}
              max={365}
              value={settings.cartExpirationDays}
              onChange={(event) => updateSettings({ cartExpirationDays: parseInt(event.target.value) || 30 })}
            />
            <p className="text-sm text-muted-foreground">
              Cart and email-event records are automatically deleted after this period.
            </p>
          </div>
        </CardContent>
      </Card>

        <SettingsSection id="cart-guest-tracking" title="Guest tracking" description="Choose whether checkout email addresses can be used for guest recovery." summary={settings.trackGuestCarts ? 'Enabled' : 'Disabled'}>
            <div className="flex items-center justify-between gap-6">
              <div className="space-y-0.5">
                <Label htmlFor="trackGuestCarts">Track Guest Carts</Label>
                <p className="text-sm text-muted-foreground">
                  Capture the billing email entered by a guest during checkout.
                </p>
              </div>
              <Switch
                id="trackGuestCarts"
                checked={settings.trackGuestCarts}
                onCheckedChange={(checked) => updateSettings({ trackGuestCarts: checked })}
              />
            </div>
        </SettingsSection>

        <SettingsSection id="cart-completed-recoveries" title="Completed recoveries" description="Control retention after an attributed order is paid." summary={settings.deleteOnRecovery ? 'Delete recovered carts' : 'Keep recovery records'}>
            <div className="flex items-center justify-between gap-6">
              <div className="space-y-0.5">
                <Label htmlFor="deleteOnRecovery">Delete Cart on Recovery</Label>
                <p className="text-sm text-muted-foreground">
                  Remove the cart record after payment. Keep it disabled to retain recovery analytics.
                </p>
              </div>
              <Switch
                id="deleteOnRecovery"
                checked={settings.deleteOnRecovery}
                onCheckedChange={(checked) => updateSettings({ deleteOnRecovery: checked })}
              />
            </div>
        </SettingsSection>
    </div>
  )
}