import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { SettingsGrid } from "@/components/settings-layout"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { BarChart3, Tag, Share2, Flame, Eye, Megaphone, Linkedin, Music, Pin, Camera } from "lucide-react"
import { IntegrationSettings, CookieCategory } from "../../types"

interface IntegrationsTabProps {
  settings: IntegrationSettings
  categories: CookieCategory[]
  updateSettings: <K extends keyof IntegrationSettings>(key: K, value: IntegrationSettings[K]) => void
}

function IntegrationCard({
  icon: Icon,
  title,
  description,
  enabled,
  onToggle,
  toggleId,
  toggleLabel,
  idLabel,
  idValue,
  idPlaceholder,
  idHint,
  onIdChange,
  category,
  categories,
  onCategoryChange,
}: {
  icon: React.ComponentType<{ className?: string }>
  title: string
  description: string
  enabled: boolean
  onToggle: (checked: boolean) => void
  toggleId: string
  toggleLabel: string
  idLabel: string
  idValue: string
  idPlaceholder: string
  idHint: string
  onIdChange: (value: string) => void
  category: string
  categories: CookieCategory[]
  onCategoryChange: (value: string) => void
}) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Icon className="h-5 w-5" />
          {title}
        </CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="flex items-center gap-3">
          <Switch
            id={toggleId}
            checked={enabled}
            onCheckedChange={onToggle}
          />
          <Label htmlFor={toggleId} className="cursor-pointer">
            {toggleLabel}
          </Label>
        </div>

        {enabled && (
          <div className="grid gap-4 md:grid-cols-2 pt-4 border-t">
            <div className="space-y-2">
              <Label>{idLabel}</Label>
              <Input
                value={idValue}
                onChange={(e) => onIdChange(e.target.value)}
                placeholder={idPlaceholder}
              />
              <p className="text-xs text-muted-foreground">{idHint}</p>
            </div>

            <div className="space-y-2">
              <Label>Cookie Category</Label>
              <Select value={category} onValueChange={onCategoryChange}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {categories.map(cat => (
                    <SelectItem key={cat.id} value={cat.id}>
                      {cat.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <p className="text-xs text-muted-foreground">
                Which consent category is required
              </p>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  )
}

export function IntegrationsTab({ settings, categories, updateSettings }: IntegrationsTabProps) {
  const createUpdater = <K extends keyof IntegrationSettings>(key: K) => {
    return (field: keyof IntegrationSettings[K], value: any) => {
      updateSettings(key, {
        ...settings[key],
        [field]: value
      })
    }
  }

  const gaUpdate = createUpdater('googleAnalytics')
  const gtmUpdate = createUpdater('googleTagManager')
  const fbUpdate = createUpdater('facebookPixel')
  const hotjarUpdate = createUpdater('hotjar')
  const clarityUpdate = createUpdater('microsoftClarity')
  const gadsUpdate = createUpdater('googleAds')
  const linkedinUpdate = createUpdater('linkedinInsightTag')
  const tiktokUpdate = createUpdater('tiktokPixel')
  const pinterestUpdate = createUpdater('pinterestTag')
  const snapchatUpdate = createUpdater('snapchatPixel')

  return (
    <SettingsGrid>
      {/* Google Analytics */}
      <IntegrationCard
        icon={BarChart3}
        title="Google Analytics"
        description="Load GA4 tracking based on cookie consent"
        enabled={settings.googleAnalytics.enabled}
        onToggle={(checked) => gaUpdate('enabled', checked)}
        toggleId="gaEnabled"
        toggleLabel="Enable Google Analytics integration"
        idLabel="Measurement ID"
        idValue={settings.googleAnalytics.trackingId}
        idPlaceholder="G-XXXXXXXXXX"
        idHint="Your GA4 Measurement ID"
        onIdChange={(v) => gaUpdate('trackingId', v)}
        category={settings.googleAnalytics.category}
        categories={categories}
        onCategoryChange={(v) => gaUpdate('category', v)}
      />

      {/* Google Tag Manager */}
      <IntegrationCard
        icon={Tag}
        title="Google Tag Manager"
        description="Load GTM container based on cookie consent"
        enabled={settings.googleTagManager.enabled}
        onToggle={(checked) => gtmUpdate('enabled', checked)}
        toggleId="gtmEnabled"
        toggleLabel="Enable Google Tag Manager integration"
        idLabel="Container ID"
        idValue={settings.googleTagManager.containerId}
        idPlaceholder="GTM-XXXXXXX"
        idHint="Your GTM Container ID"
        onIdChange={(v) => gtmUpdate('containerId', v)}
        category={settings.googleTagManager.category}
        categories={categories}
        onCategoryChange={(v) => gtmUpdate('category', v)}
      />

      {/* Facebook Pixel */}
      <IntegrationCard
        icon={Share2}
        title="Facebook Pixel"
        description="Load Meta Pixel based on cookie consent"
        enabled={settings.facebookPixel.enabled}
        onToggle={(checked) => fbUpdate('enabled', checked)}
        toggleId="fbEnabled"
        toggleLabel="Enable Facebook Pixel integration"
        idLabel="Pixel ID"
        idValue={settings.facebookPixel.pixelId}
        idPlaceholder="XXXXXXXXXXXXXXXX"
        idHint="Your Meta Pixel ID"
        onIdChange={(v) => fbUpdate('pixelId', v)}
        category={settings.facebookPixel.category}
        categories={categories}
        onCategoryChange={(v) => fbUpdate('category', v)}
      />

      {/* Hotjar */}
      <IntegrationCard
        icon={Flame}
        title="Hotjar"
        description="Load Hotjar heatmaps and session recordings based on consent"
        enabled={settings.hotjar.enabled}
        onToggle={(checked) => hotjarUpdate('enabled', checked)}
        toggleId="hotjarEnabled"
        toggleLabel="Enable Hotjar integration"
        idLabel="Site ID"
        idValue={settings.hotjar.siteId}
        idPlaceholder="XXXXXXX"
        idHint="Your Hotjar Site ID (found in tracking code)"
        onIdChange={(v) => hotjarUpdate('siteId', v)}
        category={settings.hotjar.category}
        categories={categories}
        onCategoryChange={(v) => hotjarUpdate('category', v)}
      />

      {/* Microsoft Clarity */}
      <IntegrationCard
        icon={Eye}
        title="Microsoft Clarity"
        description="Load Clarity session recordings and heatmaps based on consent"
        enabled={settings.microsoftClarity.enabled}
        onToggle={(checked) => clarityUpdate('enabled', checked)}
        toggleId="clarityEnabled"
        toggleLabel="Enable Microsoft Clarity integration"
        idLabel="Project ID"
        idValue={settings.microsoftClarity.projectId}
        idPlaceholder="XXXXXXXXXX"
        idHint="Your Clarity Project ID"
        onIdChange={(v) => clarityUpdate('projectId', v)}
        category={settings.microsoftClarity.category}
        categories={categories}
        onCategoryChange={(v) => clarityUpdate('category', v)}
      />

      {/* Google Ads */}
      <IntegrationCard
        icon={Megaphone}
        title="Google Ads"
        description="Load Google Ads conversion tracking based on consent"
        enabled={settings.googleAds.enabled}
        onToggle={(checked) => gadsUpdate('enabled', checked)}
        toggleId="gadsEnabled"
        toggleLabel="Enable Google Ads integration"
        idLabel="Conversion ID"
        idValue={settings.googleAds.conversionId}
        idPlaceholder="AW-XXXXXXXXX"
        idHint="Your Google Ads Conversion ID"
        onIdChange={(v) => gadsUpdate('conversionId', v)}
        category={settings.googleAds.category}
        categories={categories}
        onCategoryChange={(v) => gadsUpdate('category', v)}
      />

      {/* LinkedIn Insight Tag */}
      <IntegrationCard
        icon={Linkedin}
        title="LinkedIn Insight Tag"
        description="Load LinkedIn conversion tracking based on consent"
        enabled={settings.linkedinInsightTag.enabled}
        onToggle={(checked) => linkedinUpdate('enabled', checked)}
        toggleId="linkedinEnabled"
        toggleLabel="Enable LinkedIn Insight Tag integration"
        idLabel="Partner ID"
        idValue={settings.linkedinInsightTag.partnerId}
        idPlaceholder="XXXXXXX"
        idHint="Your LinkedIn Partner ID"
        onIdChange={(v) => linkedinUpdate('partnerId', v)}
        category={settings.linkedinInsightTag.category}
        categories={categories}
        onCategoryChange={(v) => linkedinUpdate('category', v)}
      />

      {/* TikTok Pixel */}
      <IntegrationCard
        icon={Music}
        title="TikTok Pixel"
        description="Load TikTok conversion tracking based on consent"
        enabled={settings.tiktokPixel.enabled}
        onToggle={(checked) => tiktokUpdate('enabled', checked)}
        toggleId="tiktokEnabled"
        toggleLabel="Enable TikTok Pixel integration"
        idLabel="Pixel ID"
        idValue={settings.tiktokPixel.pixelId}
        idPlaceholder="XXXXXXXXXXXXXXXXXXXXX"
        idHint="Your TikTok Pixel ID"
        onIdChange={(v) => tiktokUpdate('pixelId', v)}
        category={settings.tiktokPixel.category}
        categories={categories}
        onCategoryChange={(v) => tiktokUpdate('category', v)}
      />

      {/* Pinterest Tag */}
      <IntegrationCard
        icon={Pin}
        title="Pinterest Tag"
        description="Load Pinterest conversion tracking based on consent"
        enabled={settings.pinterestTag.enabled}
        onToggle={(checked) => pinterestUpdate('enabled', checked)}
        toggleId="pinterestEnabled"
        toggleLabel="Enable Pinterest Tag integration"
        idLabel="Tag ID"
        idValue={settings.pinterestTag.tagId}
        idPlaceholder="XXXXXXXXXXXXXXXXXXXXX"
        idHint="Your Pinterest Tag ID"
        onIdChange={(v) => pinterestUpdate('tagId', v)}
        category={settings.pinterestTag.category}
        categories={categories}
        onCategoryChange={(v) => pinterestUpdate('category', v)}
      />

      {/* Snapchat Pixel */}
      <IntegrationCard
        icon={Camera}
        title="Snapchat Pixel"
        description="Load Snapchat conversion tracking based on consent"
        enabled={settings.snapchatPixel.enabled}
        onToggle={(checked) => snapchatUpdate('enabled', checked)}
        toggleId="snapchatEnabled"
        toggleLabel="Enable Snapchat Pixel integration"
        idLabel="Pixel ID"
        idValue={settings.snapchatPixel.pixelId}
        idPlaceholder="XXXXXXXXXXXXXXXXXXXXXXXXXXXX"
        idHint="Your Snapchat Pixel ID"
        onIdChange={(v) => snapchatUpdate('pixelId', v)}
        category={settings.snapchatPixel.category}
        categories={categories}
        onCategoryChange={(v) => snapchatUpdate('category', v)}
      />

    </SettingsGrid>
  )
}