import {
  Page,
  Layout,
  LegacyCard,
  Button,
  TextField,
  Select,
  BlockStack,
  InlineStack,
  Text,
  Badge,
  ChoiceList,
  DatePicker,
  Popover,
  Icon,
  FormLayout,
  Divider,
  Banner,
  RadioButton,
  Checkbox,
  Tooltip,
  ButtonGroup,
  Tag,
  Thumbnail,
  Autocomplete,
  Modal,
  Spinner,
} from '@shopify/polaris';
import { CalendarIcon, ClockIcon, ArrowLeftIcon } from '@shopify/polaris-icons';
import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
import { useNavigate, useParams } from '@remix-run/react';
import { getTemplateVariables } from '../utils/availableVariables';
import { fetchAllContactList } from '../utils/contactsApi';
import { getAllTemplateList, getSelectedTemplatebyName, saveTemporaryFile } from '../utils/templateApi';
import { sendBroadcastCampaign, fetchCampaignDetails } from '../utils/broadcastApi';
import WhatsAppPreview from '../components/WhatsAppPreview';
import { userDataReady, getAPIToken, getUserInfo, getAccountDetails, getAutoReplyToken } from '../utils/apiConfig';


function RetargetBroadcastPage() {
  const navigate = useNavigate();
  const { campaignId } = useParams();

  const [autoReplyToken, setAutoReplyToken] = useState(null);
  const [API_TOKEN, setApiToken] = useState(null);
  const [userInfo, setUserInfo] = useState(null);
  const [accountDetails, setAccountDetails] = useState(null);

  const [connected, setConnected] = useState(false);
  const [purchased, setPurchased] = useState(false);

  const [loadingInitialData, setLoadingInitialData] = useState(true);

  useEffect(() => {
    async function loadData() {
      try {
        await userDataReady;

        const token = await getAPIToken();
        const uInfo = await getUserInfo();
        const autoToken = await getAutoReplyToken();
        const accDetails = await getAccountDetails();

        setApiToken(token);
        setUserInfo(uInfo);
        setAutoReplyToken(autoToken);
        setAccountDetails(accDetails);

        setConnected(accDetails?.isAccountConnected || false);
        setPurchased(accDetails?.isplanpurchased || false);

        setLoadingInitialData(false);
      } catch (err) {
        console.error("Error loading initial data:", err);
        setLoadingInitialData(false);
      }
    }

    loadData();
  }, []);

  const [broadcastName, setBroadcastName] = useState('');
  const [selectedTemplateId, setSelectedTemplateId] = useState('');
  const [templateInputValue, setTemplateInputValue] = useState('');
  const [variableMapping, setVariableMapping] = useState({});
  const [mediaMapping, setMediaMapping] = useState({});
  const [selectedStaticLists, setSelectedStaticLists] = useState([]);
  const [staticListInputValue, setStaticListInputValue] = useState('');
  const [staticListDropdownActive, setStaticListDropdownActive] = useState(false);
  const [scheduleType, setScheduleType] = useState('immediate');
  const [scheduledDate, setScheduledDate] = useState(new Date());
  const [scheduledTime, setScheduledTime] = useState('09:00');
  const [datePickerActive, setDatePickerActive] = useState(false);
  const [estimatedReach, setEstimatedReach] = useState(0);

  const [allContactLists, setAllContactLists] = useState([]);
  const [retargetTypes, setRetargetTypes] = useState([]);
  const [campaignStats, setCampaignStats] = useState({
    read: 0,
    delivered: 0,
    sent: 0,
    failed: 0,
    total: 0
  });
  const [staticListsLoading, setStaticListsLoading] = useState(false);
  const [staticListsLoadingMore, setStaticListsLoadingMore] = useState(false);
  const [staticListsNextPageUrl, setStaticListsNextPageUrl] = useState(null);
  const [staticListsError, setStaticListsError] = useState(null);
  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');

  const [liveSegmentLists, setLiveSegmentLists] = useState([]);
  const [liveSegmentLoading, setLiveSegmentLoading] = useState(false);
  const [liveSegmentLoadingMore, setLiveSegmentLoadingMore] = useState(false);
  const [liveSegmentNextPageUrl, setLiveSegmentNextPageUrl] = useState(null);
  const [liveSegmentError, setLiveSegmentError] = useState(null);
  const [debouncedLiveSegmentSearchTerm, setDebouncedLiveSegmentSearchTerm] = useState('');

  const [apiTemplates, setApiTemplates] = useState([]);
  const [loadingTemplates, setLoadingTemplates] = useState(false);
  const [templateError, setTemplateError] = useState(null);
  const [selectedTemplateData, setSelectedTemplateData] = useState(null);
  const [loadingTemplateDetails, setLoadingTemplateDetails] = useState(false);
  const [uploadingMedia, setUploadingMedia] = useState({});
  const [sendingBroadcast, setSendingBroadcast] = useState(false);
  const [broadcastError, setBroadcastError] = useState(null);

  const [contactListFields, setContactListFields] = useState([]);
  const [loadingContactListFields, setLoadingContactListFields] = useState(false);

  const [staticValueEnabled, setStaticValueEnabled] = useState({});
  const [staticValues, setStaticValues] = useState({});
  const [urlButtonVariableMapping, setUrlButtonVariableMapping] = useState({});
  const [urlButtonStaticValueEnabled, setUrlButtonStaticValueEnabled] = useState({});
  const [urlButtonStaticValues, setUrlButtonStaticValues] = useState({});

  const [availableVariables, setAvailableVariables] = useState([
    { label: 'name', value: '{{name}}' },
    { label: 'number', value: '{{number}}' }
  ]);
  const [loadingVariables, setLoadingVariables] = useState(true);
  const [showVariablesModal, setShowVariablesModal] = useState(false);
  const [variableSearchQuery, setVariableSearchQuery] = useState('');
  const [variableInputValues, setVariableInputValues] = useState({});
  const [urlButtonVariableInputValues, setUrlButtonVariableInputValues] = useState({});

  const handleRetargetTypeChange = useCallback((checked, value) => {
    setRetargetTypes(prev => {
      const newTypes = checked
        ? [...prev, value]
        : prev.filter(t => t !== value);

      setBroadcastName(prevName => {
        // Remove any existing status suffixes from the end of the name
        const cleanName = prevName.replace(/(-(read|delivered|sent|failed|multi))+$/i, '');
        
        if (newTypes.length === 0) return cleanName;
        
        // Sort types to maintain consistent naming (Read, Delivered, Sent, Failed)
        const statusOrder = ['read', 'delivered', 'sent', 'failed'];
        const sortedTypes = [...newTypes].sort((a, b) => statusOrder.indexOf(a) - statusOrder.indexOf(b));
        
        return `${cleanName}-${sortedTypes.join('-')}`;
      });

      return newTypes;
    });
  }, []);

  const fetchApiTemplates = useCallback(async () => {
    try {
      setLoadingTemplates(true);
      const response = await getAllTemplateList();
      if (response.status && response.data && response.data.customtemplates) {
        const transformedTemplates = response.data.customtemplates.map(template => ({
          id: template.template_id ? template.template_id.toString() : 'unknown',
          name: template.template_name || 'Unknown Template',
          templateId: template.template_id,
          label: template.template_name || 'Unknown Template',
          value: template.template_id ? template.template_id.toString() : 'unknown'
        }));
        setApiTemplates(transformedTemplates);
        return transformedTemplates;
      }
    } catch (error) {
      console.error('Error fetching templates:', error);
    } finally {
      setLoadingTemplates(false);
    }
    return [];
  }, []);

  useEffect(() => {
    fetchApiTemplates();
  }, [fetchApiTemplates]);

  const allTemplateOptions = useMemo(() => apiTemplates, [apiTemplates]);

  const fetchVariables = useCallback(async () => {
    try {
      setLoadingVariables(true);
      const variables = await getTemplateVariables();
      const predefinedVariables = [
        { label: 'name', value: '{{name}}' },
        { label: 'number', value: '{{number}}' }
      ];
      const allVars = [...predefinedVariables, ...variables];
      setAvailableVariables(allVars);
      return allVars;
    } catch (error) {
      console.error('Error fetching variables:', error);
    } finally {
      setLoadingVariables(false);
    }
    return [];
  }, []);

  useEffect(() => {
    fetchVariables();
  }, [fetchVariables]);

  // Retargeting logic: Fetch and Restore
  const [isRetargetingLoaded, setIsRetargetingLoaded] = useState(false);

  const loadCampaignForRetargeting = useCallback(async (id, templates, vars) => {
    if (isRetargetingLoaded || !id || templates.length === 0 || vars.length === 0) return;

    try {
      setLoadingTemplateDetails(true);
      const response = await fetchCampaignDetails(id);
      if (response.status && response.campaign) {
        const campaign = response.campaign;

        // Use tagDetails if available to populate contact list names
        if (response.tagDetails && Array.isArray(response.tagDetails)) {
          const newTags = response.tagDetails.map(tag => ({
            id: tag.id,
            name: tag.name,
            totalcontatspertag_count: 0
          }));
          setAllContactLists(prev => {
            const existingIds = new Set(prev.map(l => l.id.toString()));
            const filteredNew = newTags.filter(t => !existingIds.has(t.id.toString()));
            return [...prev, ...filteredNew];
          });
        }

        setBroadcastName(campaign.name + " - Retarget");

        // Audience
        if (campaign.tags) {
          try {
            const tags = JSON.parse(campaign.tags);
            if (Array.isArray(tags)) {
              setSelectedStaticLists(tags.map(t => t.toString()));
            }
          } catch (e) {
            if (campaign.tag) {
              setSelectedStaticLists([campaign.tag.toString()]);
            }
          }
        } else if (campaign.tag) {
          setSelectedStaticLists([campaign.tag.toString()]);
        }

        // Load stats
        setCampaignStats({
          read: campaign.totalread || 0,
          delivered: campaign.totaldelivered || 0,
          sent: campaign.totalsent || (campaign.executed - campaign.failed) || 0,
          failed: campaign.failed || 0,
          total: campaign.executed || 0
        });

        // Template
        const templateName = campaign.template_name;
        if (templateName) {
          setTemplateInputValue(templateName);
          const matchingTemplate = templates.find(t => t.name === templateName);
          if (matchingTemplate) {
            setSelectedTemplateId(matchingTemplate.id);
          }

          // Load template details
          const tResponse = await getSelectedTemplatebyName(templateName);
          if (tResponse.data && tResponse.data.length > 0) {
            const tData = tResponse.data[0];
            setSelectedTemplateData(tData);

            // If we didn't have the ID yet, use it from the fetched data
            if (!selectedTemplateId && (tData.id || tData.template_id)) {
              setSelectedTemplateId((tData.id || tData.template_id).toString());
            }

            // Restore mappings
            if (campaign.message) {
              restoreCampaignMappings(tData, JSON.parse(campaign.message), vars);
            }
          }
        }
      }
      setIsRetargetingLoaded(true);
    } catch (error) {
      console.error("Error loading retarget campaign:", error);
    } finally {
      setLoadingTemplateDetails(false);
    }
  }, [isRetargetingLoaded]);

  useEffect(() => {
    if (!loadingInitialData && apiTemplates.length > 0 && availableVariables.length > 2) {
      loadCampaignForRetargeting(campaignId, apiTemplates, availableVariables);
    }
  }, [loadingInitialData, apiTemplates, availableVariables, campaignId, loadCampaignForRetargeting]);

  const restoreCampaignMappings = (templateData, messageJson, vars) => {
    const newVariableMapping = {};
    const newStaticValueEnabled = {};
    const newStaticValues = {};
    const newVariableInputValues = {};

    if (messageJson.template && messageJson.template.components) {
      messageJson.template.components.forEach(comp => {
        if (['BODY', 'HEADER', 'FOOTER'].includes(comp.type)) {
          if (comp.parameters) {
            comp.parameters.forEach(param => {
              if (param.type === 'text') {
                const varName = param.parameter_name;
                const textValue = param.text;
                const key = `${comp.type.toLowerCase()}_var_${varName}`;

                const match = textValue.match(/^\{(.*)\}$/);
                if (match) {
                  const fieldName = match[1];
                  const foundVar = vars.find(v => v.label === fieldName || v.value === fieldName);
                  if (foundVar) {
                    newVariableMapping[key] = { value: foundVar.value, placeholder: `{{${varName}}}`, required: true, componentType: comp.type };
                    newVariableInputValues[key] = foundVar.label;
                  } else {
                    newStaticValueEnabled[key] = true;
                    newStaticValues[key] = fieldName;
                  }
                } else {
                  newStaticValueEnabled[key] = true;
                  newStaticValues[key] = textValue;
                }
              }
            });
          }
        }
      });
    }

    setVariableMapping(newVariableMapping);
    setStaticValueEnabled(newStaticValueEnabled);
    setStaticValues(newStaticValues);
    setVariableInputValues(newVariableInputValues);
  };

  // Original Handlers from create-broadcast
  const handleTemplateChange = useCallback(async (value) => {
    setSelectedTemplateId(value);
    const selectedTemplate = apiTemplates.find(template => template.id === value || template.value === value);
    if (selectedTemplate) {
      setTemplateInputValue(selectedTemplate.label);
      try {
        setLoadingTemplateDetails(true);
        const response = await getSelectedTemplatebyName(selectedTemplate.name);
        if (response.data && response.data.length > 0) {
          setSelectedTemplateData(response.data[0]);
        }
      } catch (error) {
        console.error('Error fetching template details:', error);
      } finally {
        setLoadingTemplateDetails(false);
      }
    }
  }, [apiTemplates]);

  const handleBroadcastNameChange = useCallback((value) => setBroadcastName(value), []);

  const handleDateChange = useCallback((date) => {
    setScheduledDate(date.selection.start);
    setDatePickerActive(false);
  }, []);

  // Simplified Variable components (mimicking the UI of create-broadcast)
  const renderVariableMapping = () => {
    if (!selectedTemplateData) return null;
    const bodyVars = selectedTemplateData.components?.find(c => c.type === 'BODY')?.text?.match(/\{\{([^}]+)\}\}/g) || [];
    const headerVars = selectedTemplateData.components?.find(c => c.type === 'HEADER')?.text?.match(/\{\{([^}]+)\}\}/g) || [];

    const allVars = [
      ...headerVars.map(v => ({ v: v.match(/\{\{([^}]+)\}\}/)[1], type: 'HEADER' })),
      ...bodyVars.map(v => ({ v: v.match(/\{\{([^}]+)\}\}/)[1], type: 'BODY' }))
    ];

    if (allVars.length === 0) return null;

    return (
      <LegacyCard title="Variable Mapping" sectioned>
        <BlockStack gap="400">
          {allVars.map(({ v, type }) => {
            const key = `${type.toLowerCase()}_var_${v}`;
            return (
              <div key={key}>
                <InlineStack align="space-between" blockAlign="center">
                  <Text variant="bodyMd" fontWeight="medium">Map {`{{${v}}}`} ({type})</Text>
                  <Button variant="plain" onClick={() => setStaticValueEnabled(p => ({ ...p, [key]: !p[key] }))}>
                    {staticValueEnabled[key] ? "Use Data Field" : "Use Static Value"}
                  </Button>
                </InlineStack>
                <div style={{ marginTop: '8px' }}>
                  {staticValueEnabled[key] ? (
                    <TextField label={`Static value for {{${v}}}`} value={staticValues[key] || ''} onChange={(val) => setStaticValues(p => ({ ...p, [key]: val }))} />
                  ) : (
                    <Select
                      label={`Data field for {{${v}}}`}
                      options={availableVariables}
                      value={variableMapping[key]?.value || ''}
                      onChange={(val) => {
                        setVariableMapping(p => ({ ...p, [key]: { value: val, placeholder: `{{${v}}}`, componentType: type } }));
                        const av = availableVariables.find(x => x.value === val);
                        setVariableInputValues(p => ({ ...p, [key]: av?.label || '' }));
                      }}
                    />
                  )}
                </div>
              </div>
            );
          })}
        </BlockStack>
      </LegacyCard>
    );
  };

  const handleSaveBroadcast = async () => {
    try {
      setSendingBroadcast(true);
      const campaignSchedule = scheduleType === 'immediate'
        ? { scheduleType: "now" }
        : {
          scheduleType: "schedule",
          scheduleDateTime: `${scheduledDate.getFullYear()}-${String(scheduledDate.getMonth() + 1).padStart(2, '0')}-${String(scheduledDate.getDate()).padStart(2, '0')} ${scheduledTime}:00`
        };

      const templateComponents = [];
      if (selectedTemplateData?.components) {
        selectedTemplateData.components.forEach(comp => {
          if (['BODY', 'HEADER', 'FOOTER'].includes(comp.type)) {
            const parameters = [];
            const vars = comp.text?.match(/\{\{([^}]+)\}\}/g);
            if (vars) {
              vars.forEach(v => {
                const varName = v.match(/\{\{([^}]+)\}\}/)[1];
                const key = `${comp.type.toLowerCase()}_var_${varName}`;
                let val = varName;
                if (staticValueEnabled[key]) val = staticValues[key];
                else if (variableMapping[key]?.value) {
                  const av = availableVariables.find(x => x.value === variableMapping[key].value);
                  val = av ? av.label : variableMapping[key].value;
                }
                parameters.push({ type: "text", parameter_name: varName, text: `{${val}}` });
              });
            }
            if (parameters.length > 0) templateComponents.push({ type: comp.type, parameters });
          }
        });
      }

      const payload = {
        retargetCustomers: retargetTypes,
        retargetedCampaignId: campaignId,
        CampaignSchedule: scheduleType === 'immediate'
          ? { scheduleType: 'now' }
          : {
            scheduleType: 'scheduled',
            scheduleDate: `${scheduledDate.getFullYear()}-${String(scheduledDate.getMonth() + 1).padStart(2, '0')}-${String(scheduledDate.getDate()).padStart(2, '0')}`,
            scheduleTime: scheduledTime
          },
        campaign_name: broadcastName,
        templateJson: {
          to: "receiver_number",
          type: "template",
          template: {
            name: selectedTemplateData.name,
            language: { code: selectedTemplateData.language || 'en_US' },
            components: templateComponents
          },
          recipient_type: "individual",
          messaging_product: "whatsapp"
        },
        currentChoosedTemplateJson: {
          choosedTemplate: {
            name: selectedTemplateData.name,
            parameter_format: selectedTemplateData.parameter_format || "POSITIONAL",
            components: selectedTemplateData.components || [],
            language: selectedTemplateData.language || 'en_US',
            status: selectedTemplateData.status || 'APPROVED',
            category: selectedTemplateData.category || 'MARKETING',
            id: selectedTemplateData.id || selectedTemplateData.template_id || ''
          }
        },
        contactTagIds: selectedStaticLists
      };

      await sendBroadcastCampaign(payload);
      navigate('/app/broadcast');
    } catch (e) {
      setBroadcastError(e.message);
    } finally {
      setSendingBroadcast(false);
    }
  };

  // Preview helpers
  const getTemplateForPreview = (templateData) => {
    if (!templateData) return null;
    return JSON.stringify({
      template: {
        name: templateData.name,
        language: { code: templateData.language || 'en_US' },
        components: templateData.components || []
      }
    });
  };

  const convertVariableMappingForPreview = () => {
    const previewMapping = {};
    Object.entries(variableMapping).forEach(([key, data]) => {
      const varName = key.replace(/^(body_var_|header_var_|footer_var_)/, '');
      if (staticValueEnabled[key]) previewMapping[varName] = staticValues[key];
      else if (data?.value) {
        const av = availableVariables.find(x => x.value === data.value);
        previewMapping[varName] = av ? av.label : data.value;
      }
    });
    return previewMapping;
  };

  const staticListOptions = useMemo(() => {
    const uniqueLists = new Map();
    allContactLists.forEach(list => {
      if (list.id && !uniqueLists.has(list.id)) {
        uniqueLists.set(list.id, {
          label: list.name || `List ${list.id}`,
          value: list.id?.toString(),
          contacts: list.totalcontatspertag_count || 0,
          id: list.id
        });
      }
    });
    return Array.from(uniqueLists.values());
  }, [allContactLists]);

  useEffect(() => {
    let reach = 0;
    if (retargetTypes.length === 0) {
      reach = 0;
    } else {
      retargetTypes.forEach(type => {
        reach += campaignStats[type] || 0;
      });
    }

    setEstimatedReach(reach);
  }, [retargetTypes, campaignStats]);


  const filteredTemplateOptions = useMemo(() => {
    if (!templateInputValue.trim()) return apiTemplates;
    const searchLower = templateInputValue.toLowerCase();
    return apiTemplates.filter(template =>
      template.label.toLowerCase().includes(searchLower) ||
      template.name?.toLowerCase().includes(searchLower)
    );
  }, [apiTemplates, templateInputValue]);

  const filteredStaticListOptions = useMemo(() => {
    if (!staticListInputValue.trim()) return staticListOptions;
    const searchLower = staticListInputValue.toLowerCase();
    return staticListOptions.filter(option =>
      option.label.toLowerCase().includes(searchLower)
    );
  }, [staticListOptions, staticListInputValue]);

  // Audience loading
  useEffect(() => {
    if (allContactLists.length === 0) {
      const loadLists = async () => {
        setStaticListsLoading(true);
        try {
          const res = await fetchAllContactList({ page: 1, perPageData: 100 });
          if (res?.WhatsAppBusinessTag?.data) setAllContactLists(res.WhatsAppBusinessTag.data);
        } catch (e) { } finally { setStaticListsLoading(false); }
      };
      loadLists();
    }
  }, []);


  const isFormValid = useMemo(() => {
    const isNameValid = broadcastName.trim().length > 0;
    const isTemplateValid = selectedTemplateId && selectedTemplateData;
    const isAudienceValid = selectedStaticLists.length > 0 && retargetTypes.length > 0;

    // Check if all template variables are mapped
    const bodyVars = selectedTemplateData?.components?.find(c => c.type === 'BODY')?.text?.match(/\{\{([^}]+)\}\}/g) || [];
    const headerVars = selectedTemplateData?.components?.find(c => c.type === 'HEADER')?.text?.match(/\{\{([^}]+)\}\}/g) || [];

    const allVariablesMapped = [...headerVars, ...bodyVars].every(v => {
      const varName = v.match(/\{\{([^}]+)\}\}/)[1];
      const headerKey = `header_var_${varName}`;
      const bodyKey = `body_var_${varName}`;
      const key = headerVars.includes(v) ? headerKey : bodyKey;

      if (staticValueEnabled[key]) {
        return staticValues[key]?.trim().length > 0;
      } else {
        return variableMapping[key]?.value;
      }
    });

    return isNameValid && isTemplateValid && isAudienceValid && allVariablesMapped;
  }, [broadcastName, selectedTemplateId, selectedTemplateData, selectedStaticLists, retargetTypes, staticValueEnabled, staticValues, variableMapping]);


  if (loadingInitialData || loadingTemplates) {
    return <Page fullWidth><div style={{ textAlign: 'center', padding: '100px' }}><Spinner size="large" /></div></Page>;
  }

  return (
    <Page
      fullWidth
      title="Retarget Broadcast Campaign"
      backAction={{ content: 'Back', onAction: () => navigate('/app/broadcast') }}
      primaryAction={{
        content: scheduleType === 'immediate' ? 'Send Now' : 'Schedule Broadcast',
        onAction: handleSaveBroadcast,
        loading: sendingBroadcast,
        disabled: !connected || !purchased || !isFormValid || sendingBroadcast
      }}
    >
      <Layout>
        <Layout.Section>
          <BlockStack gap="500">
            {broadcastError && <Banner tone="critical">{broadcastError}</Banner>}
            {!connected && (
              <Banner tone="warning" title="WhatsApp Business Account not connected">
                Please connect your WhatsApp account in settings to send broadcasts.
              </Banner>
            )}

            <Layout>
              <Layout.Section>
                <BlockStack gap="500">
                  <LegacyCard title="Broadcast Details" sectioned>
                    <FormLayout>
                      <TextField
                        label="Broadcast Name"
                        value={broadcastName}
                        onChange={handleBroadcastNameChange}
                        placeholder="Enter a name for this broadcast"
                        autoComplete="off"
                      />
                      <Autocomplete
                        label="Select Template"
                        options={filteredTemplateOptions}
                        selected={[selectedTemplateId]}
                        onSelect={(s) => handleTemplateChange(s[0])}
                        textField={
                          <Autocomplete.TextField
                            label="Select Template"
                            value={templateInputValue}
                            onChange={setTemplateInputValue}
                            placeholder="Search templates..."
                            loading={loadingTemplates}
                          />
                        }
                      />
                    </FormLayout>
                  </LegacyCard>

                  <LegacyCard title="Target Audience" sectioned>
                    <BlockStack gap="400">
                      <Text variant="bodyMd" tone="subdued">
                        The audience for this retargeted broadcast is locked to the original campaign's recipients.
                      </Text>

                      <div style={{ marginTop: '8px' }}>
                        <InlineStack gap="200" wrap>
                          {selectedStaticLists.map(id => (
                            <Tag key={id}>
                              {staticListOptions.find(l => l.value === id)?.label || id}
                            </Tag>
                          ))}
                        </InlineStack>
                      </div>

                      <div style={{ marginTop: '16px' }}>
                        <Divider />
                        <div style={{ marginTop: '16px' }}>
                          <BlockStack gap="200">
                            <Text variant="headingMd" as="h3">Retarget Customer</Text>
                            <Text variant="bodyMd" tone="subdued">
                              Choose customer type to retarget campaign
                            </Text>
                            <InlineStack gap="400">
                              <Checkbox
                                label="Read"
                                checked={retargetTypes.includes('read')}
                                onChange={(checked) => handleRetargetTypeChange(checked, 'read')}
                              />
                              <Checkbox
                                label="Delivered"
                                checked={retargetTypes.includes('delivered')}
                                onChange={(checked) => handleRetargetTypeChange(checked, 'delivered')}
                              />
                              <Checkbox
                                label="Sent"
                                checked={retargetTypes.includes('sent')}
                                onChange={(checked) => handleRetargetTypeChange(checked, 'sent')}
                              />
                              <Checkbox
                                label="Failed"
                                checked={retargetTypes.includes('failed')}
                                onChange={(checked) => handleRetargetTypeChange(checked, 'failed')}
                              />
                            </InlineStack>
                            {retargetTypes.length === 0 && (
                              <Text tone="critical" variant="bodySm">Please select at least one customer type to retarget</Text>
                            )}
                          </BlockStack>
                        </div>
                      </div>
                    </BlockStack>
                  </LegacyCard>

                  {renderVariableMapping()}

                  <LegacyCard title="Schedule Broadcast" sectioned>
                    <BlockStack gap="400">
                      <InlineStack gap="400">
                        <RadioButton
                          label="Send immediately"
                          checked={scheduleType === 'immediate'}
                          onChange={() => setScheduleType('immediate')}
                        />
                        <RadioButton
                          label="Schedule for later"
                          checked={scheduleType === 'scheduled'}
                          onChange={() => setScheduleType('scheduled')}
                        />
                      </InlineStack>

                      {scheduleType === 'scheduled' && (
                        <InlineStack gap="400" blockAlign="center">
                          <Popover
                            active={datePickerActive}
                            activator={<Button onClick={() => setDatePickerActive(!datePickerActive)} disclosure icon={CalendarIcon}>{scheduledDate.toLocaleDateString()}</Button>}
                            onClose={() => setDatePickerActive(false)}
                          >
                            <DatePicker
                              month={scheduledDate.getMonth()}
                              year={scheduledDate.getFullYear()}
                              selected={scheduledDate}
                              onChange={handleDateChange}
                              disableDatesBefore={new Date()}
                            />
                          </Popover>
                          <Select
                            label="Time"
                            labelHidden
                            options={Array.from({ length: 24 }, (_, i) => ({ label: `${i < 10 ? '0' : ''}${i}:00`, value: `${i < 10 ? '0' : ''}${i}:00` }))}
                            value={scheduledTime}
                            onChange={setScheduledTime}
                          />
                        </InlineStack>
                      )}
                    </BlockStack>
                  </LegacyCard>
                  
                  {/* Bottom Action Buttons */}
                  <LegacyCard sectioned>
                    <InlineStack align="end" gap="300">
                      <Button
                        variant="primary"
                        onClick={handleSaveBroadcast}
                        disabled={!purchased || !connected || !isFormValid || sendingBroadcast}
                        loading={sendingBroadcast}
                        tone={scheduleType === 'immediate' ? 'success' : 'primary'}
                        size="large"
                      >
                        {scheduleType === 'immediate' ? 'Send Now' : 'Schedule Broadcast'}
                      </Button>
                    </InlineStack>
                  </LegacyCard>
                </BlockStack>
              </Layout.Section>

              <Layout.Section variant="oneThird">
                <div style={{ position: 'sticky', top: '20px' }}>
                  <LegacyCard title="Template Preview" sectioned>
                    {selectedTemplateData ? (
                      <WhatsAppPreview
                        template={getTemplateForPreview(selectedTemplateData)}
                        variableMapping={convertVariableMappingForPreview()}
                      />
                    ) : (
                      <div style={{ textAlign: 'center', padding: '40px', border: '1px dashed #ccc' }}>
                        <Text tone="subdued">Select a template to see preview</Text>
                      </div>
                    )}
                  </LegacyCard>

                  <div style={{ marginTop: '20px' }}>
                    <LegacyCard sectioned>
                      <BlockStack gap="200">
                        <Text variant="headingMd">Summary</Text>
                        <Divider />
                        <InlineStack align="space-between">
                          <Text>Recipients:</Text>
                          <Text fontWeight="bold">{estimatedReach}</Text>
                        </InlineStack>
                        <InlineStack align="space-between">
                          <Text>Schedule:</Text>
                          <Text fontWeight="bold">{scheduleType === 'immediate' ? 'Now' : `${scheduledDate.toLocaleDateString()} ${scheduledTime}`}</Text>
                        </InlineStack>
                      </BlockStack>
                    </LegacyCard>
                  </div>
                </div>
              </Layout.Section>
            </Layout>
          </BlockStack>
        </Layout.Section>
      </Layout>
    </Page>
  );
}

export default RetargetBroadcastPage;