/**
 * General Settings Tab for Quantity Limits
 */

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import type { QuantityLimitsSettings } from "../../types"

interface GeneralTabProps {
  settings: QuantityLimitsSettings
  onChange: (settings: QuantityLimitsSettings) => void
}

export function GeneralTab({ settings, onChange }: GeneralTabProps) {
  const updateSetting = <K extends keyof QuantityLimitsSettings>(
    key: K,
    value: QuantityLimitsSettings[K]
  ) => {
    onChange({ ...settings, [key]: value })
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {/* Display Options */}
      <Card>
        <CardHeader>
          <CardTitle>Display Options</CardTitle>
          <CardDescription>
            Configure how quantity limits are displayed to customers.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label htmlFor="show_notices">Show Product Notices</Label>
              <p className="text-sm text-muted-foreground">
                Display quantity limit information on product pages.
              </p>
            </div>
            <Switch
              id="show_notices"
              checked={settings.show_notices}
              onCheckedChange={(checked) => updateSetting('show_notices', checked)}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="notice_style">Notice Style</Label>
            <Select
              value={settings.notice_style}
              onValueChange={(value) => updateSetting('notice_style', value as QuantityLimitsSettings['notice_style'])}
            >
              <SelectTrigger id="notice_style">
                <SelectValue placeholder="Select style" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="info">Info (Blue)</SelectItem>
                <SelectItem value="warning">Warning (Yellow)</SelectItem>
                <SelectItem value="success">Success (Green)</SelectItem>
                <SelectItem value="neutral">Neutral (Gray)</SelectItem>
              </SelectContent>
            </Select>
            <p className="text-sm text-muted-foreground">
              Choose the visual style for quantity limit notices.
            </p>
          </div>
        </CardContent>
      </Card>

      {/* Validation Options */}
      <Card>
        <CardHeader>
          <CardTitle>Validation Options</CardTitle>
          <CardDescription>
            Configure how quantity rules are enforced.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label htmlFor="block_checkout">Block Checkout on Violation</Label>
              <p className="text-sm text-muted-foreground">
                Prevent customers from completing checkout if quantity rules are not met.
              </p>
            </div>
            <Switch
              id="block_checkout"
              checked={settings.block_checkout}
              onCheckedChange={(checked) => updateSetting('block_checkout', checked)}
            />
          </div>

          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label htmlFor="combine_variations">Combine Variation Quantities</Label>
              <p className="text-sm text-muted-foreground">
                Count all variations of a product together for max quantity limits.
              </p>
            </div>
            <Switch
              id="combine_variations"
              checked={settings.combine_variations}
              onCheckedChange={(checked) => updateSetting('combine_variations', checked)}
            />
          </div>
        </CardContent>
      </Card>
    </div>
  )
}