import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { EmailSettings, ConfirmEmailSettings } from "../../types"
import { Mail, CheckCircle, Paintbrush } from "lucide-react"
import { useBackInStockSubscriptions } from "../../hooks/use-back-in-stock"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Trash2, Loader2 } from "lucide-react"
import { toast } from "sonner"
import { useState } from "react"
import { EmailCustomizer } from "@/components/email-customizer"
import type { EmailContentSettings, PlaceholderConfig, PlaceholderCategoryLabel, ProductCardConfig } from "@/components/email-customizer/sections"

// ---------------------------------------------------------------------------
// BIS-specific placeholders for the Email Customizer
// ---------------------------------------------------------------------------

const bisPlaceholders: PlaceholderConfig[] = [
  { tag: '{product_name}',   description: 'Product name',                 example: 'Blue Running Shoes', category: 'product' },
  { tag: '{product_price}',  description: 'Product price',                example: '$49.99',             category: 'product' },
  { tag: '{product_url}',    description: 'Product page URL',             example: 'https://store.com/product/shoes', category: 'product' },
  { tag: '{customer_email}', description: "Subscriber's email address",   example: 'john@example.com',   category: 'customer' },
  { 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' },
]

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

/** Sample product data shown in the Email Customizer preview. */
const sampleProduct = {
  name: 'Blue Running Shoes',
  price: '$49.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 NotificationsTabProps {
  emailSettings: EmailSettings
  confirmEmailSettings: ConfirmEmailSettings
  updateEmailSettings: <K extends keyof EmailSettings>(key: K, value: EmailSettings[K]) => void
  updateConfirmEmailSettings: <K extends keyof ConfirmEmailSettings>(key: K, value: ConfirmEmailSettings[K]) => void
}

export function NotificationsTab({ 
  emailSettings,
  confirmEmailSettings,
  updateEmailSettings,
  updateConfirmEmailSettings
}: NotificationsTabProps) {
  const [subTab, setSubTab] = useState("email-settings")
  
  return (
    <Tabs value={subTab} onValueChange={setSubTab} className="w-full">
      <TabsList className="grid w-full max-w-md grid-cols-2">
        <TabsTrigger value="email-settings">Email Settings</TabsTrigger>
        <TabsTrigger value="subscriptions">Subscriptions</TabsTrigger>
      </TabsList>

      <TabsContent value="email-settings" className="mt-6">
        <EmailSettingsContent 
          emailSettings={emailSettings}
          confirmEmailSettings={confirmEmailSettings}
          updateEmailSettings={updateEmailSettings}
          updateConfirmEmailSettings={updateConfirmEmailSettings}
        />
      </TabsContent>

      <TabsContent value="subscriptions" className="mt-6">
        <SubscriptionsContent />
      </TabsContent>
    </Tabs>
  )
}

function EmailSettingsContent({ 
  emailSettings,
  confirmEmailSettings,
  updateEmailSettings,
  updateConfirmEmailSettings
}: NotificationsTabProps) {
  const [activeCustomizer, setActiveCustomizer] = useState<'notification' | 'confirmation' | null>(null)

  // ---- Notification Email: map BIS settings ↔ EmailContentSettings ----
  const notificationContent: EmailContentSettings = {
    subject: emailSettings.subject,
    heading: emailSettings.heading,
    body: emailSettings.bodyText,
    additionalContent: '',
    preheaderText: '',
  }

  const handleSaveNotification = (content: EmailContentSettings) => {
    updateEmailSettings('subject', content.subject)
    updateEmailSettings('heading', content.heading)
    if (content.body !== undefined) {
      updateEmailSettings('bodyText', content.body)
    }
  }

  // ---- Product Card config for the Notification Email ----
  const notificationProductCard: ProductCardConfig = {
    showImage: emailSettings.includeImage,
    showTitle: emailSettings.includeTitle,
    showPrice: emailSettings.includePrice,
    buttonText: emailSettings.buttonText,
    sample: sampleProduct,
  }

  const handleSaveNotificationProductCard = (card: ProductCardConfig) => {
    updateEmailSettings('includeImage', card.showImage)
    updateEmailSettings('includeTitle', card.showTitle)
    updateEmailSettings('includePrice', card.showPrice)
    updateEmailSettings('buttonText', card.buttonText)
  }

  // ---- Confirmation Email: map BIS settings ↔ EmailContentSettings ----
  const confirmationContent: EmailContentSettings = {
    subject: confirmEmailSettings.subject,
    heading: confirmEmailSettings.heading,
    body: confirmEmailSettings.bodyText,
    additionalContent: '',
    preheaderText: '',
  }

  const handleSaveConfirmation = (content: EmailContentSettings) => {
    updateConfirmEmailSettings('subject', content.subject)
    updateConfirmEmailSettings('heading', content.heading)
    if (content.body !== undefined) {
      updateConfirmEmailSettings('bodyText', content.body)
    }
  }

  return (
    <>
      {/* Email Customizer Full-Screen Overlay — Notification Email */}
      {activeCustomizer === 'notification' && (
        <EmailCustomizer
          onClose={() => setActiveCustomizer(null)}
          emailType={{
            id: 'back_in_stock_notification',
            label: 'Notification Email',
            defaultContent: {
              subject: 'Good news! {product_name} is back in stock!',
              heading: "It's Back!",
              body: "Great news! The product you've been waiting for is now back in stock. Don't miss out - grab yours before it sells out again!",
              additionalContent: '',
              preheaderText: '',
            },
          }}
          initialContent={notificationContent}
          onSaveContent={handleSaveNotification}
          productCard={notificationProductCard}
          onSaveProductCard={handleSaveNotificationProductCard}
          placeholders={bisPlaceholders}
          placeholderCategories={bisCategoryLabels}
          subjectPlaceholderHint="Available: {product_name}, {site_name}"
        />
      )}

      {/* Email Customizer Full-Screen Overlay — Confirmation Email */}
      {activeCustomizer === 'confirmation' && (
        <EmailCustomizer
          onClose={() => setActiveCustomizer(null)}
          emailType={{
            id: 'back_in_stock_confirmation',
            label: 'Confirmation Email',
            defaultContent: {
              subject: 'Confirm your stock notification subscription',
              heading: 'Confirm Your Subscription',
              body: 'Please confirm that you want to be notified when {product_name} is back in stock.',
              additionalContent: '',
              preheaderText: '',
            },
          }}
          initialContent={confirmationContent}
          onSaveContent={handleSaveConfirmation}
          placeholders={bisPlaceholders}
          placeholderCategories={bisCategoryLabels}
          subjectPlaceholderHint="Available: {product_name}, {site_name}"
        />
      )}

      <Card className="mb-6">
        <CardHeader>
          <CardTitle>Email Sender</CardTitle>
          <CardDescription>
            Set the sender identity used for confirmation and stock notification emails
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-4 md:grid-cols-2">
          <div className="space-y-2">
            <Label htmlFor="back-in-stock-from-name">From name</Label>
            <Input
              id="back-in-stock-from-name"
              value={emailSettings.fromName}
              onChange={(event) => updateEmailSettings('fromName', event.target.value)}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="back-in-stock-from-email">From email</Label>
            <Input
              id="back-in-stock-from-email"
              type="email"
              value={emailSettings.fromEmail}
              onChange={(event) => updateEmailSettings('fromEmail', event.target.value)}
            />
          </div>
        </CardContent>
      </Card>

      {/* Email Templates List */}
      <Card>
        <CardHeader>
          <CardTitle>Email Templates</CardTitle>
          <CardDescription>
            Customize the emails sent by the Back In Stock feature
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="rounded-lg border divide-y">
            {/* Notification Email Row */}
            <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">Notification Email</h4>
                  <p className="text-sm text-muted-foreground">
                    Sent to subscribers when a product is back in stock
                  </p>
                </div>
              </div>
              <Button
                size="sm"
                className="gap-2 text-white"
                style={{ backgroundColor: '#00226b' }}
                onClick={() => setActiveCustomizer('notification')}
              >
                <Paintbrush className="h-4 w-4" />
                Customize Email
              </Button>
            </div>

            {/* Confirmation Email Row */}
            <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">
                  <CheckCircle className="h-5 w-5 text-primary" />
                </div>
                <div>
                  <h4 className="font-medium text-sm">Confirmation Email</h4>
                  <p className="text-sm text-muted-foreground">
                    Sent when double opt-in is enabled to confirm subscription
                  </p>
                </div>
              </div>
              <Button
                size="sm"
                className="gap-2 text-white"
                style={{ backgroundColor: '#00226b' }}
                onClick={() => setActiveCustomizer('confirmation')}
              >
                <Paintbrush className="h-4 w-4" />
                Customize Email
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
    </>
  )
}

function SubscriptionsContent() {
  const { subscriptions, total, page, pages, loading, fetchSubscriptions, deleteSubscription } = useBackInStockSubscriptions()
  const [deletingId, setDeletingId] = useState<number | null>(null)

  const handleDelete = async (id: number) => {
    setDeletingId(id)
    const result = await deleteSubscription(id)
    if (result.success) {
      toast.success("Subscription deleted")
    } else {
      toast.error("Failed to delete subscription")
    }
    setDeletingId(null)
  }

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'active':
        return <Badge variant="default" className="bg-green-500">Active</Badge>
      case 'notified':
        return <Badge variant="secondary">Notified</Badge>
      case 'unsubscribed':
        return <Badge variant="outline">Unsubscribed</Badge>
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center py-12">
        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
      </div>
    )
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Active Subscriptions</CardTitle>
        <CardDescription>
          {total} total subscriptions
        </CardDescription>
      </CardHeader>
      <CardContent>
        {subscriptions.length === 0 ? (
          <div className="text-center py-8 text-muted-foreground">
            No subscriptions yet. Customers will appear here when they subscribe.
          </div>
        ) : (
          <>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Email</TableHead>
                <TableHead>Product</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Subscribed</TableHead>
                <TableHead className="w-[50px]"></TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {subscriptions.map((sub) => (
                <TableRow key={sub.id}>
                  <TableCell className="font-medium">{sub.email}</TableCell>
                  <TableCell>{sub.product_name || `Product #${sub.product_id}`}</TableCell>
                  <TableCell>{getStatusBadge(sub.status)}</TableCell>
                  <TableCell>
                    {new Date(sub.subscribed_at).toLocaleDateString()}
                  </TableCell>
                  <TableCell>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => handleDelete(sub.id)}
                      disabled={deletingId === sub.id}
                    >
                      {deletingId === sub.id ? (
                        <Loader2 className="h-4 w-4 animate-spin" />
                      ) : (
                        <Trash2 className="h-4 w-4 text-red-500" />
                      )}
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
          {pages > 1 && (
            <div className="mt-4 flex items-center justify-between border-t pt-4">
              <span className="text-sm text-muted-foreground">Page {page} of {pages}</span>
              <div className="flex gap-2">
                <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => fetchSubscriptions({ page: page - 1 })}>
                  Previous
                </Button>
                <Button variant="outline" size="sm" disabled={page >= pages} onClick={() => fetchSubscriptions({ page: page + 1 })}>
                  Next
                </Button>
              </div>
            </div>
          )}
          </>
        )}
      </CardContent>
    </Card>
  )
}