import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { GeneralSettings, BackInStockProSettings } from "../../types"
import { Settings, Shield } from "lucide-react"
import { usePro } from "@/contexts/pro-context"

interface GeneralTabProps {
  settings: GeneralSettings
  updateGeneralSettings: <K extends keyof GeneralSettings>(key: K, value: GeneralSettings[K]) => void
  proSettings: BackInStockProSettings
  updateProSettings: <K extends keyof BackInStockProSettings>(key: K, value: BackInStockProSettings[K]) => void
}

export function GeneralTab({ 
  settings, 
  updateGeneralSettings,
  proSettings,
  updateProSettings,
}: GeneralTabProps) {
  const { isPro } = usePro()
  return (
    <div className="space-y-6">
      {/* Display Settings */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Settings className="h-5 w-5" />
            Display Settings
          </CardTitle>
          <CardDescription>
            Control when and where the notification form appears
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-6 md:grid-cols-2">
            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="showOnOutOfStock">Show on out of stock products</Label>
                <p className="text-sm text-muted-foreground">
                  Display the subscription form when products are out of stock
                </p>
              </div>
              <Switch
                id="showOnOutOfStock"
                checked={settings.showOnOutOfStock}
                onCheckedChange={(checked) => updateGeneralSettings('showOnOutOfStock', checked)}
              />
            </div>

            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="showOnBackorder">Show on backorder products</Label>
                <p className="text-sm text-muted-foreground">
                  Display the form for products on backorder
                </p>
              </div>
              <Switch
                id="showOnBackorder"
                checked={settings.showOnBackorder}
                onCheckedChange={(checked) => updateGeneralSettings('showOnBackorder', checked)}
              />
            </div>

            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="allowGuests">Allow guest subscriptions</Label>
                <p className="text-sm text-muted-foreground">
                  Let non-logged-in users subscribe for notifications
                </p>
              </div>
              <Switch
                id="allowGuests"
                checked={settings.allowGuests}
                onCheckedChange={(checked) => updateGeneralSettings('allowGuests', checked)}
              />
            </div>

            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="autoRemoveOnPurchase">Auto-remove on purchase</Label>
                <p className="text-sm text-muted-foreground">
                  Remove subscription when customer purchases the product
                </p>
              </div>
              <Switch
                id="autoRemoveOnPurchase"
                checked={settings.autoRemoveOnPurchase}
                onCheckedChange={(checked) => updateGeneralSettings('autoRemoveOnPurchase', checked)}
              />
            </div>

            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="requireDoubleOptIn">Require email confirmation</Label>
                <p className="text-sm text-muted-foreground">
                  Confirm ownership before adding an address to the waitlist
                </p>
              </div>
              <Switch
                id="requireDoubleOptIn"
                checked={settings.requireDoubleOptIn}
                onCheckedChange={(checked) => updateGeneralSettings('requireDoubleOptIn', checked)}
              />
            </div>
          </div>

          <div className="grid gap-6 md:grid-cols-2 mt-6 pt-6 border-t">
            <div className="space-y-2">
              <Label htmlFor="subscriptionLimit">Subscription limit per user</Label>
              <Input
                id="subscriptionLimit"
                type="number"
                min={0}
                value={settings.subscriptionLimit}
                onChange={(e) => updateGeneralSettings('subscriptionLimit', parseInt(e.target.value) || 0)}
                placeholder="0 = unlimited"
              />
              <p className="text-sm text-muted-foreground">
                Maximum number of products a user can subscribe to (0 for unlimited)
              </p>
            </div>

            <div className="space-y-2">
              <Label htmlFor="minStockToNotify">Minimum stock to notify</Label>
              <Input
                id="minStockToNotify"
                type="number"
                min={1}
                value={settings.minStockToNotify}
                onChange={(e) => updateGeneralSettings('minStockToNotify', parseInt(e.target.value) || 1)}
              />
              <p className="text-sm text-muted-foreground">
                Only send notifications when stock reaches this level
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Pro Settings */}
      {isPro && (
        <Card>
          <CardHeader>
            <div className="flex items-center gap-2">
              <CardTitle className="flex items-center gap-2">
                <Shield className="h-5 w-5" />
                Advanced Settings
              </CardTitle>
            </div>
            <CardDescription>
              Per-product subscription limits and CAPTCHA protection
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid gap-6 md:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="perProductSubscriptionLimit">Subscription limit per product</Label>
                <Input
                  id="perProductSubscriptionLimit"
                  type="number"
                  min={0}
                  value={proSettings.perProductSubscriptionLimit}
                  onChange={(e) => updateProSettings('perProductSubscriptionLimit', parseInt(e.target.value) || 0)}
                  placeholder="0 = unlimited"
                />
                <p className="text-sm text-muted-foreground">
                  Maximum number of subscriptions allowed per product (0 for unlimited)
                </p>
              </div>

              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label htmlFor="enableCaptcha">Enable CAPTCHA on subscribe form</Label>
                  <p className="text-sm text-muted-foreground">
                    Protect the subscription form with CAPTCHA. Configure your CAPTCHA provider in the reCAPTCHA feature settings.
                  </p>
                </div>
                <Switch
                  id="enableCaptcha"
                  checked={proSettings.enableCaptcha}
                  onCheckedChange={(checked) => updateProSettings('enableCaptcha', checked)}
                />
              </div>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}