/**
 * Products Info Tab for Quantity Limits
 */

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ExternalLink } from "lucide-react"

export function ProductsTab() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {/* Quick Links */}
      <Card>
        <CardHeader>
          <CardTitle>Product Management</CardTitle>
          <CardDescription>
            Configure quantity limits directly on each product's edit page.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          <a
            href="/wp-admin/edit.php?post_type=product"
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center justify-between p-4 border rounded-lg hover:bg-muted transition-colors"
          >
            <span className="font-medium">View All Products</span>
            <ExternalLink className="h-4 w-4" />
          </a>
          <a
            href="/wp-admin/post-new.php?post_type=product"
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center justify-between p-4 border rounded-lg hover:bg-muted transition-colors"
          >
            <span className="font-medium">Add New Product</span>
            <ExternalLink className="h-4 w-4" />
          </a>
        </CardContent>
      </Card>

      {/* Available Options */}
      <Card>
        <CardHeader>
          <CardTitle>Available Product Options</CardTitle>
          <CardDescription>
            Settings available on each product's edit page in the "Quantity Limits" tab.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="flex items-center justify-between p-3 border rounded-lg">
            <span className="font-medium">Minimum Quantity</span>
            <Badge variant="outline">Per Product</Badge>
          </div>
          <div className="flex items-center justify-between p-3 border rounded-lg">
            <span className="font-medium">Maximum Quantity</span>
            <Badge variant="outline">Per Product</Badge>
          </div>
          <div className="flex items-center justify-between p-3 border rounded-lg">
            <span className="font-medium">Quantity Step</span>
            <Badge variant="outline">Per Product</Badge>
          </div>
          <div className="flex items-center justify-between p-3 border rounded-lg">
            <span className="font-medium">Exclude from Order Rules</span>
            <Badge variant="outline">Per Product</Badge>
          </div>
        </CardContent>
      </Card>

      {/* Variation Support */}
      <Card className="md:col-span-2">
        <CardHeader>
          <CardTitle>Variable Product Support</CardTitle>
          <CardDescription>
            Quantity limits work with variable products and individual variations.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="p-4 bg-muted rounded-lg">
              <h4 className="font-medium mb-2">Parent Product Rules</h4>
              <p className="text-sm text-muted-foreground">
                Set limits on the parent product. These apply to all variations unless overridden.
              </p>
            </div>
            <div className="p-4 bg-muted rounded-lg">
              <h4 className="font-medium mb-2">Variation-Level Rules</h4>
              <p className="text-sm text-muted-foreground">
                Override limits for specific variations in each variation's pricing section.
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}