/**
 * Messages Tab for Quantity Limits
 */

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import type { QuantityLimitsSettings } from "../../types"

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

export function MessagesTab({ settings, onChange }: MessagesTabProps) {
  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">
      {/* Product Messages */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            Product Messages
          </CardTitle>
          <CardDescription>
            Customize error messages for product quantity limits.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <div className="flex items-center gap-2">
              <Label htmlFor="min_qty_message">Minimum Quantity</Label>
              <Badge variant="outline" className="text-xs">{'{min}'}</Badge>
            </div>
            <Input
              id="min_qty_message"
              value={settings.min_qty_message}
              onChange={(e) => updateSetting('min_qty_message', e.target.value)}
              placeholder="Minimum quantity required is {min}"
            />
          </div>

          <div className="space-y-2">
            <div className="flex items-center gap-2">
              <Label htmlFor="max_qty_message">Maximum Quantity</Label>
              <Badge variant="outline" className="text-xs">{'{max}'}</Badge>
            </div>
            <Input
              id="max_qty_message"
              value={settings.max_qty_message}
              onChange={(e) => updateSetting('max_qty_message', e.target.value)}
              placeholder="Maximum quantity allowed is {max}"
            />
          </div>

          <div className="space-y-2">
            <div className="flex items-center gap-2">
              <Label htmlFor="step_qty_message">Step Quantity</Label>
              <Badge variant="outline" className="text-xs">{'{step}'}</Badge>
            </div>
            <Input
              id="step_qty_message"
              value={settings.step_qty_message}
              onChange={(e) => updateSetting('step_qty_message', e.target.value)}
              placeholder="Quantity must be in multiples of {step}"
            />
          </div>
        </CardContent>
      </Card>

      {/* Order Messages */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            Order Messages
          </CardTitle>
          <CardDescription>
            Customize error messages for order-level limits.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <div className="flex items-center gap-2">
              <Label htmlFor="min_order_qty_message">Min Order Quantity</Label>
              <Badge variant="outline" className="text-xs">{'{min}'}</Badge>
            </div>
            <Input
              id="min_order_qty_message"
              value={settings.min_order_qty_message}
              onChange={(e) => updateSetting('min_order_qty_message', e.target.value)}
              placeholder="Minimum order quantity is {min}"
            />
          </div>

          <div className="space-y-2">
            <div className="flex items-center gap-2">
              <Label htmlFor="max_order_qty_message">Max Order Quantity</Label>
              <Badge variant="outline" className="text-xs">{'{max}'}</Badge>
            </div>
            <Input
              id="max_order_qty_message"
              value={settings.max_order_qty_message}
              onChange={(e) => updateSetting('max_order_qty_message', e.target.value)}
              placeholder="Maximum order quantity is {max}"
            />
          </div>

          <div className="space-y-2">
            <div className="flex items-center gap-2">
              <Label htmlFor="min_order_total_message">Min Order Total</Label>
              <Badge variant="outline" className="text-xs">{'{min}'}</Badge>
            </div>
            <Input
              id="min_order_total_message"
              value={settings.min_order_total_message}
              onChange={(e) => updateSetting('min_order_total_message', e.target.value)}
              placeholder="Minimum order total is {min}"
            />
          </div>

          <div className="space-y-2">
            <div className="flex items-center gap-2">
              <Label htmlFor="max_order_total_message">Max Order Total</Label>
              <Badge variant="outline" className="text-xs">{'{max}'}</Badge>
            </div>
            <Input
              id="max_order_total_message"
              value={settings.max_order_total_message}
              onChange={(e) => updateSetting('max_order_total_message', e.target.value)}
              placeholder="Maximum order total is {max}"
            />
          </div>
        </CardContent>
      </Card>

      {/* Category Messages */}
      <Card className="md:col-span-2">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            Category Messages
          </CardTitle>
          <CardDescription>
            Customize error messages for category quantity limits.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <div className="flex items-center gap-2">
                <Label htmlFor="category_min_message">Category Minimum</Label>
                <Badge variant="outline" className="text-xs">{'{min}'}</Badge>
                <Badge variant="outline" className="text-xs">{'{category}'}</Badge>
              </div>
              <Input
                id="category_min_message"
                value={settings.category_min_message}
                onChange={(e) => updateSetting('category_min_message', e.target.value)}
                placeholder="Minimum quantity for {category} is {min}"
              />
            </div>

            <div className="space-y-2">
              <div className="flex items-center gap-2">
                <Label htmlFor="category_max_message">Category Maximum</Label>
                <Badge variant="outline" className="text-xs">{'{max}'}</Badge>
                <Badge variant="outline" className="text-xs">{'{category}'}</Badge>
              </div>
              <Input
                id="category_max_message"
                value={settings.category_max_message}
                onChange={(e) => updateSetting('category_max_message', e.target.value)}
                placeholder="Maximum quantity for {category} is {max}"
              />
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}