import { useState } from "react"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Switch } from "@/components/ui/switch"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Plus, Trash2, Mail, Paintbrush, Ticket } from "lucide-react"
import { AbandonedCartSettings, EmailSequenceItem } from "../../types"
import { EmailCustomizer } from "@/components/email-customizer"
import type { EmailContentSettings, PlaceholderConfig, PlaceholderCategoryLabel, ProductCardConfig, CouponDisplayConfig } from "@/components/email-customizer/sections"

// ---------------------------------------------------------------------------
// Abandoned Cart-specific placeholders for the Email Customizer
// ---------------------------------------------------------------------------

const cartPlaceholders: PlaceholderConfig[] = [
  { tag: '{customer_name}',   description: 'Customer first name or "there" for guests',  example: 'John',            category: 'customer' },
  { tag: '{customer_email}',  description: "Customer's email address",                    example: 'john@example.com', category: 'customer' },
  { tag: '{cart_total}',      description: 'Cart total with currency symbol',             example: '$149.99',          category: 'cart' },
  { tag: '{recovery_link}',   description: 'Unique cart recovery URL',                    example: 'https://store.com/?recover=abc123', category: 'cart' },
  { tag: '{site_name}',       description: 'Your website name',                           example: 'My Store',         category: 'site' },
  { tag: '{site_url}',        description: 'Your website URL',                            example: 'https://mystore.com', category: 'site' },
  { tag: '{unsubscribe_link}', description: 'Opt-out link for recovery emails',           example: 'https://store.com/?unsubscribe=abc123', category: 'site' },
]

const cartCategoryLabels: Record<string, PlaceholderCategoryLabel> = {
  customer: { label: 'Customer', color: 'bg-green-100 text-green-700' },
  cart:     { label: 'Cart',     color: 'bg-blue-100 text-blue-700' },
  site:     { label: 'Site',     color: 'bg-orange-100 text-orange-700' },
}

/** Sample product data shown in the Email Customizer preview. */
const sampleProduct = {
  name: 'Premium Wireless Headphones',
  price: '$79.99',
  imageUrl: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Crect fill='%23f3f4f6' width='200' height='200'/%3E%3Cpath d='M70 130l30-50 30 50' fill='none' stroke='%23d1d5db' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M95 130l12-20 12 20' fill='none' stroke='%23d1d5db' stroke-width='4' stroke-linejoin='round'/%3E%3Ccircle cx='78' cy='82' r='8' fill='%23d1d5db'/%3E%3C/svg%3E",
  productUrl: '#',
}

interface AutomationTabProps {
  settings: AbandonedCartSettings
  updateSettings: (updates: Partial<AbandonedCartSettings>) => void
  updateEmail: (index: number, updates: Partial<EmailSequenceItem>) => void
  addEmail: () => void
  removeEmail: (index: number) => void
  updateUnpaidEmail: (index: number, updates: Partial<EmailSequenceItem>) => void
  addUnpaidEmail: () => void
  removeUnpaidEmail: (index: number) => void
}

export function AutomationTab({ settings, updateSettings, updateEmail, addEmail, removeEmail, updateUnpaidEmail, addUnpaidEmail, removeUnpaidEmail }: AutomationTabProps) {
  const maxEmails = 5
  const [showCustomizer, setShowCustomizer] = useState(false)
  const [showUnpaidCustomizer, setShowUnpaidCustomizer] = useState(false)
  const maxUnpaidEmails = 5

  // ---- Map settings ↔ EmailContentSettings ----
  const emailContent: EmailContentSettings = {
    subject: settings.emails[0]?.subject || 'You left something in your cart!',
    heading: settings.emailHeading || "Your cart is waiting!",
    body: settings.emailBodyText || "Hi {customer_name},\n\nIt looks like you left some items in your cart at {site_name}. Your cart is saved and ready for you.",
    additionalContent: '',
    preheaderText: '',
  }

  const handleSaveContent = (content: EmailContentSettings) => {
    updateSettings({
      emailHeading: content.heading,
      emailBodyText: content.body,
    })
    // Also update the first email's subject if changed in the customizer
    if (content.subject !== settings.emails[0]?.subject) {
      updateEmail(0, { subject: content.subject })
    }
  }

  // ---- Product Card config ----
  const productCard: ProductCardConfig = {
    showImage: settings.emailShowImage ?? true,
    showTitle: settings.emailShowTitle ?? true,
    showPrice: settings.emailShowPrice ?? true,
    buttonText: settings.emailButtonText || 'Complete Your Order',
    sample: sampleProduct,
  }

  const handleSaveProductCard = (card: ProductCardConfig) => {
    updateSettings({
      emailShowImage: card.showImage,
      emailShowTitle: card.showTitle,
      emailShowPrice: card.showPrice,
      emailButtonText: card.buttonText,
    })
  }

  // ---- Coupon Display config ----
  const couponDisplay: CouponDisplayConfig = {
    boxBgColor: settings.couponBoxBgColor || '#f0fdf4',
    boxBorderColor: settings.couponBoxBorderColor || '#bbf7d0',
    boxTextColor: settings.couponBoxTextColor || '#166534',
    codeBgColor: settings.couponCodeBgColor || '#dcfce7',
    messageText: settings.couponMessageText || 'Use code {coupon_code} at checkout for a special discount!',
  }

  const handleSaveCouponDisplay = (config: CouponDisplayConfig) => {
    updateSettings({
      couponBoxBgColor: config.boxBgColor,
      couponBoxBorderColor: config.boxBorderColor,
      couponBoxTextColor: config.boxTextColor,
      couponCodeBgColor: config.codeBgColor,
      couponMessageText: config.messageText,
    })
  }

  return (
    <>
      {/* Email Customizer Full-Screen Overlay */}
      {showCustomizer && (
        <EmailCustomizer
          onClose={() => setShowCustomizer(false)}
          emailType={{
            id: 'abandoned_cart_reminder',
            label: 'Cart Recovery Email',
            defaultContent: {
              subject: 'You left something in your cart!',
              heading: "Your cart is waiting!",
              body: "Hi {customer_name},\n\nIt looks like you left some items in your cart at {site_name}. Your cart is saved and ready for you.",
              additionalContent: '',
              preheaderText: '',
            },
          }}
          initialContent={emailContent}
          onSaveContent={handleSaveContent}
          productCard={productCard}
          onSaveProductCard={handleSaveProductCard}
          couponDisplay={couponDisplay}
          onSaveCouponDisplay={handleSaveCouponDisplay}
          placeholders={cartPlaceholders}
          placeholderCategories={cartCategoryLabels}
          subjectPlaceholderHint="Available: {customer_name}, {site_name}, {cart_total}"
        />
      )}

      {/* Unpaid Order Email Customizer Full-Screen Overlay */}
      {showUnpaidCustomizer && (
        <EmailCustomizer
          onClose={() => setShowUnpaidCustomizer(false)}
          emailType={{
            id: 'unpaid_order_reminder',
            label: 'Unpaid Order Reminder',
            defaultContent: {
              subject: 'Complete your payment for order #{order_number}',
              heading: 'Your order is waiting for payment',
              body: "Hi {customer_name},\n\nYour order #{order_number} at {site_name} is awaiting payment. Please complete your payment to ensure your items are reserved.",
              additionalContent: '',
              preheaderText: '',
            },
          }}
          initialContent={{
            subject: settings.unpaidOrderEmails?.[0]?.subject || 'Complete your payment for order #{order_number}',
            heading: settings.unpaidEmailHeading || 'Your order is waiting for payment',
            body: settings.unpaidEmailBodyText || "Hi {customer_name},\n\nYour order #{order_number} at {site_name} is awaiting payment. Please complete your payment to ensure your items are reserved.",
            additionalContent: '',
            preheaderText: '',
          }}
          onSaveContent={(content: EmailContentSettings) => {
            updateSettings({
              unpaidEmailHeading: content.heading,
              unpaidEmailBodyText: content.body,
            })
            if (content.subject !== settings.unpaidOrderEmails?.[0]?.subject) {
              updateUnpaidEmail(0, { subject: content.subject })
            }
          }}
          placeholders={[
            { tag: '{customer_name}', description: 'Customer first name', example: 'John', category: 'customer' },
            { tag: '{customer_email}', description: "Customer's email address", example: 'john@example.com', category: 'customer' },
            { tag: '{order_number}', description: 'WooCommerce order number', example: '#1042', category: 'order' },
            { tag: '{order_total}', description: 'Order total with currency', example: '$149.99', category: 'order' },
            { tag: '{order_date}', description: 'Date the order was placed', example: 'Feb 24, 2026', category: 'order' },
            { tag: '{payment_link}', description: 'Direct link to the payment page', example: 'https://store.com/checkout/pay/1042/', category: 'order' },
            { tag: '{site_name}', description: 'Your website name', example: 'My Store', category: 'site' },
            { tag: '{site_url}', description: 'Your website URL', example: 'https://mystore.com', category: 'site' },
          ]}
          placeholderCategories={{
            customer: { label: 'Customer', color: 'bg-green-100 text-green-700' },
            order: { label: 'Order', color: 'bg-purple-100 text-purple-700' },
            site: { label: 'Site', color: 'bg-orange-100 text-orange-700' },
          }}
          subjectPlaceholderHint="Available: {customer_name}, {order_number}, {order_total}"
          couponDisplay={couponDisplay}
          onSaveCouponDisplay={handleSaveCouponDisplay}
        />
      )}

      <div className="space-y-6">
        <Card>
          <CardHeader>
            <CardTitle>Recovery Email Sequence</CardTitle>
            <CardDescription>
              Configure the automated emails sent to customers who abandon their carts.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            {settings.emails.map((email, index) => (
              <div key={index} className="border rounded-lg p-4 space-y-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="flex items-center justify-center w-8 h-8 rounded-full bg-muted text-sm font-semibold">
                      {index + 1}
                    </div>
                    <div>
                      <h4 className="text-sm font-medium">
                        {index === 0 ? 'First Reminder' : index === 1 ? 'Second Reminder' : index === 2 ? 'Final Reminder' : `Email ${index + 1}`}
                      </h4>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Switch
                      checked={email.enabled}
                      onCheckedChange={(checked) => updateEmail(index, { enabled: checked })}
                    />
                    {index > 0 && (
                      <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => removeEmail(index)}
                        className="h-8 w-8 text-muted-foreground hover:text-destructive"
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    )}
                  </div>
                </div>

                {email.enabled && (
                  <div className="space-y-3 pl-11">
                    <div className="grid grid-cols-[1fr_80px_110px] gap-2 items-end">
                      <div className="grid gap-1.5">
                        <Label className="text-xs">Subject Line</Label>
                        <Input
                          value={email.subject}
                          onChange={(e) => updateEmail(index, { subject: e.target.value })}
                          placeholder="You left something in your cart!"
                        />
                      </div>
                      <div className="grid gap-1.5">
                        <Label className="text-xs">Delay</Label>
                        <Input
                          type="number"
                          min={1}
                          value={email.delay}
                          onChange={(e) => updateEmail(index, { delay: parseInt(e.target.value) || 1 })}
                        />
                      </div>
                      <div className="grid gap-1.5">
                        <Label className="text-xs">Unit</Label>
                        <Select
                          value={email.delayUnit}
                          onValueChange={(value) => updateEmail(index, { delayUnit: value as 'minutes' | 'hours' | 'days' })}
                        >
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="minutes">Minutes</SelectItem>
                            <SelectItem value="hours">Hours</SelectItem>
                            <SelectItem value="days">Days</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>

                    <p className="text-xs text-muted-foreground">
                      {index === 0
                        ? 'Sent after the cart is flagged as abandoned.'
                        : 'Sent after the previous email in the sequence.'
                      }
                    </p>

                    {/* Per-email coupon controls */}
                    <div className="border rounded-lg p-3 space-y-3 bg-muted/30">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-2">
                            <Ticket className="h-4 w-4 text-muted-foreground" />
                            <Label className="text-sm font-medium">Include Coupon</Label>
                          </div>
                          <Switch
                            checked={email.includeCoupon || false}
                            onCheckedChange={(checked) => updateEmail(index, { includeCoupon: checked })}
                          />
                        </div>

                        {email.includeCoupon && (
                          <div className="grid grid-cols-3 gap-3">
                            <div className="grid gap-1.5">
                              <Label className="text-xs">Discount Type</Label>
                              <Select
                                value={email.couponType || 'percent'}
                                onValueChange={(value) => updateEmail(index, { couponType: value as 'percent' | 'fixed' })}
                              >
                                <SelectTrigger className="h-9">
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="percent">Percentage (%)</SelectItem>
                                  <SelectItem value="fixed">Fixed Cart Amount</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>
                            <div className="grid gap-1.5">
                              <Label className="text-xs">Amount</Label>
                              <Input
                                type="number"
                                min={1}
                                className="h-9"
                                value={email.couponAmount || 10}
                                onChange={(e) => updateEmail(index, { couponAmount: parseFloat(e.target.value) || 1 })}
                              />
                            </div>
                            <div className="grid gap-1.5">
                              <Label className="text-xs">Expiry (days)</Label>
                              <Input
                                type="number"
                                min={1}
                                className="h-9"
                                value={email.couponExpiry || 7}
                                onChange={(e) => updateEmail(index, { couponExpiry: parseInt(e.target.value) || 1 })}
                              />
                            </div>
                          </div>
                        )}
                    </div>
                  </div>
                )}
              </div>
            ))}

            {settings.emails.length < maxEmails && (
              <Button variant="outline" onClick={addEmail} className="gap-2">
                <Plus className="h-4 w-4" />
                Add Follow-up Email
              </Button>
            )}
          </CardContent>
        </Card>

        {/* Email Template Card with Customize Button */}
        <Card>
          <CardHeader>
            <CardTitle>Email Template</CardTitle>
            <CardDescription>
              Customize the look and content of your recovery emails using the visual Email Customizer.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="rounded-lg border divide-y">
              <div className="flex items-center justify-between p-4">
                <div className="flex items-center gap-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
                    <Mail className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h4 className="font-medium text-sm">Cart Recovery Email</h4>
                    <p className="text-sm text-muted-foreground">
                      Heading, body text, product card layout, and branding
                    </p>
                  </div>
                </div>
                <Button
                  size="sm"
                  className="gap-2 text-white"
                  style={{ backgroundColor: '#00226b' }}
                  onClick={() => setShowCustomizer(true)}
                >
                  <Paintbrush className="h-4 w-4" />
                  Customize Email
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Unpaid Order Email Sequence */}
        {settings.recoverUnpaidOrders && (
          <>
            <Card>
              <CardHeader>
                <div className="flex items-center gap-2">
                  <CardTitle>Unpaid Order Email Sequence</CardTitle>
                </div>
                <CardDescription>
                  Configure automated payment reminder emails for orders awaiting payment.
                  These are separate from cart recovery emails and target placed orders.
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                {(settings.unpaidOrderEmails || []).map((email, index) => (
                  <div key={index} className="border rounded-lg p-4 space-y-4">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <div className="flex items-center justify-center w-8 h-8 rounded-full bg-muted text-sm font-semibold">
                          {index + 1}
                        </div>
                        <div>
                          <h4 className="text-sm font-medium">
                            {index === 0 ? 'First Payment Reminder' : index === 1 ? 'Second Reminder' : index === 2 ? 'Final Reminder' : `Email ${index + 1}`}
                          </h4>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <Switch
                          checked={email.enabled}
                          onCheckedChange={(checked) => updateUnpaidEmail(index, { enabled: checked })}
                        />
                        {index > 0 && (
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => removeUnpaidEmail(index)}
                            className="h-8 w-8 text-muted-foreground hover:text-destructive"
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        )}
                      </div>
                    </div>

                    {email.enabled && (
                      <div className="space-y-3 pl-11">
                        <div className="grid grid-cols-[1fr_80px_110px] gap-2 items-end">
                          <div className="grid gap-1.5">
                            <Label className="text-xs">Subject Line</Label>
                            <Input
                              value={email.subject}
                              onChange={(e) => updateUnpaidEmail(index, { subject: e.target.value })}
                              placeholder="Complete your payment for order #{order_number}"
                            />
                          </div>
                          <div className="grid gap-1.5">
                            <Label className="text-xs">Delay</Label>
                            <Input
                              type="number"
                              min={1}
                              value={email.delay}
                              onChange={(e) => updateUnpaidEmail(index, { delay: parseInt(e.target.value) || 1 })}
                            />
                          </div>
                          <div className="grid gap-1.5">
                            <Label className="text-xs">Unit</Label>
                            <Select
                              value={email.delayUnit}
                              onValueChange={(value) => updateUnpaidEmail(index, { delayUnit: value as 'minutes' | 'hours' | 'days' })}
                            >
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="minutes">Minutes</SelectItem>
                                <SelectItem value="hours">Hours</SelectItem>
                                <SelectItem value="days">Days</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                        </div>

                        <p className="text-xs text-muted-foreground">
                          {index === 0
                            ? 'Sent after the order exceeds the payment timeout threshold.'
                            : 'Sent after the previous email in the sequence.'
                          }
                        </p>

                        {/* Per-email coupon controls for unpaid orders */}
                        <div className="border rounded-lg p-3 space-y-3 bg-muted/30">
                          <div className="flex items-center justify-between">
                            <div className="flex items-center gap-2">
                              <Ticket className="h-4 w-4 text-muted-foreground" />
                              <Label className="text-sm font-medium">Include Coupon</Label>
                            </div>
                            <Switch
                              checked={email.includeCoupon || false}
                              onCheckedChange={(checked) => updateUnpaidEmail(index, { includeCoupon: checked })}
                            />
                          </div>

                          {email.includeCoupon && (
                            <div className="grid grid-cols-3 gap-3">
                              <div className="grid gap-1.5">
                                <Label className="text-xs">Discount Type</Label>
                                <Select
                                  value={email.couponType || 'percent'}
                                  onValueChange={(value) => updateUnpaidEmail(index, { couponType: value as 'percent' | 'fixed' })}
                                >
                                  <SelectTrigger className="h-9">
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="percent">Percentage (%)</SelectItem>
                                    <SelectItem value="fixed">Fixed Cart Amount</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>
                              <div className="grid gap-1.5">
                                <Label className="text-xs">Amount</Label>
                                <Input
                                  type="number"
                                  min={1}
                                  className="h-9"
                                  value={email.couponAmount || 10}
                                  onChange={(e) => updateUnpaidEmail(index, { couponAmount: parseFloat(e.target.value) || 1 })}
                                />
                              </div>
                              <div className="grid gap-1.5">
                                <Label className="text-xs">Expiry (days)</Label>
                                <Input
                                  type="number"
                                  min={1}
                                  className="h-9"
                                  value={email.couponExpiry || 7}
                                  onChange={(e) => updateUnpaidEmail(index, { couponExpiry: parseInt(e.target.value) || 1 })}
                                />
                              </div>
                            </div>
                          )}
                        </div>
                      </div>
                    )}
                  </div>
                ))}

                {(settings.unpaidOrderEmails || []).length < maxUnpaidEmails && (
                  <Button variant="outline" onClick={addUnpaidEmail} className="gap-2">
                    <Plus className="h-4 w-4" />
                    Add Follow-up Email
                  </Button>
                )}
              </CardContent>
            </Card>

            {/* Unpaid Order Email Template */}
            <Card>
              <CardHeader>
                <div className="flex items-center gap-2">
                  <CardTitle>Unpaid Order Email Template</CardTitle>
                </div>
                <CardDescription>
                  Customize the payment reminder email content and appearance.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="rounded-lg border divide-y">
                  <div className="flex items-center justify-between p-4">
                    <div className="flex items-center gap-3">
                      <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
                        <Mail className="h-5 w-5 text-primary" />
                      </div>
                      <div>
                        <h4 className="font-medium text-sm">Unpaid Order Reminder</h4>
                        <p className="text-sm text-muted-foreground">
                          Heading, body text, and payment link button
                        </p>
                      </div>
                    </div>
                    <Button
                      size="sm"
                      className="gap-2 text-white"
                      style={{ backgroundColor: '#00226b' }}
                      onClick={() => setShowUnpaidCustomizer(true)}
                    >
                      <Paintbrush className="h-4 w-4" />
                      Customize Email
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          </>
        )}
      </div>
    </>
  )
}