'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import AppLayout from '@/components/layout/AppLayout';
import { META_CONFIG } from '@/config/meta';
import { appRoute } from '@/lib/utils/asset';

interface Campaign {
  id: string;
  name: string;
  status: 'ACTIVE' | 'PAUSED';
  budget: number;
  spend: number;
  impressions: number;
  clicks: number;
  ctr: number;
  cpc: number;
  purchases: number;
  revenue: number;
  roas: number;
}

export default function AdsReportPage() {
  const searchParams = useSearchParams();
  const [dateRange, setDateRange] = useState('Last 7 days');
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [activePlan, setActivePlan] = useState('Growth Plan');
  const [maxCampaigns, setMaxCampaigns] = useState<number | null>(10);
  const [isLoading, setIsLoading] = useState(true);
  const [campaigns, setCampaigns] = useState<Campaign[]>([]);

  const fetchCampaigns = async () => {
    setIsLoading(true);
    try {
      const res = await fetch('/api/ads/campaigns');
      const data = await res.json();
      if (data.success) {
        setCampaigns(data.campaigns || []);
        if (data.plan) {
          setActivePlan(data.plan.charAt(0).toUpperCase() + data.plan.slice(1) + ' Plan');
        }
        setMaxCampaigns(data.maxCampaigns);
      }
    } catch (err) {
      console.error('Failed to load campaigns:', err);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    fetchCampaigns();
  }, [dateRange]);

  // Form State for New Campaign
  const [newCampaignName, setNewCampaignName] = useState('');
  const [newObjective, setNewObjective] = useState('OUTCOME_SALES');
  const [newBudget, setNewBudget] = useState('25.00');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const toggleStatus = async (id: string) => {
    const current = campaigns.find((c) => c.id === id);
    if (!current) return;
    const newStatus = current.status === 'ACTIVE' ? 'PAUSED' : 'ACTIVE';
    setCampaigns(
      campaigns.map((c) =>
        c.id === id ? { ...c, status: newStatus } : c
      )
    );
    try {
      await fetch('/api/ads/campaigns', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id, status: newStatus }),
      });
    } catch (e) {
      console.error('Failed to update campaign status:', e);
    }
  };

  const handleCreateCampaign = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!newCampaignName.trim()) return;

    if (maxCampaigns !== null && campaigns.length >= maxCampaigns) {
      alert(`Your Free Plan allows a maximum of ${maxCampaigns} Facebook Basic Ad Campaign. You have already reached your limit. Paid plans will be available soon.`);
      return;
    }

    setIsSubmitting(true);
    try {
      const res = await fetch('/api/ads/campaigns', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: newCampaignName,
          budget: parseFloat(newBudget) || 25.0,
          objective: newObjective,
        }),
      });
      const data = await res.json();
      if (!data.success) {
        alert(data.error || 'Failed to create campaign');
        return;
      }
      setCampaigns([data.campaign, ...campaigns]);
      setNewCampaignName('');
      setNewBudget('25.00');
      setShowCreateModal(false);
    } catch (err: any) {
      alert(err.message || 'Failed to create campaign');
    } finally {
      setIsSubmitting(false);
    }
  };

  // Aggregate Totals
  const totalSpend = campaigns.reduce((acc, c) => acc + c.spend, 0);
  const totalRevenue = campaigns.reduce((acc, c) => acc + c.revenue, 0);
  const totalPurchases = campaigns.reduce((acc, c) => acc + c.purchases, 0);
  const totalImpressions = campaigns.reduce((acc, c) => acc + c.impressions, 0);
  const totalClicks = campaigns.reduce((acc, c) => acc + c.clicks, 0);
  const overallRoas = totalSpend > 0 ? (totalRevenue / totalSpend).toFixed(2) : '0.00';

  return (
    <AppLayout currentRoute="/ads-report">
      <ui-title-bar title="Meta Ads Performance">
        <button variant="primary" onClick={() => setShowCreateModal(true)}>New Campaign</button>
      </ui-title-bar>
      <div className="space-y-6">
        {/* Top Header & Action Controls */}
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-slate-200/80 pb-4">
          <div>
            <div className="flex items-center gap-2 text-xs font-semibold text-blue-600 uppercase tracking-wider">
              <i className="fa-solid fa-arrow-trend-up text-xs" />
              <span>Attribution &amp; ROAS</span>
            </div>
            <h1 className="text-2xl font-bold text-slate-900 tracking-tight mt-1">Meta Ads Performance</h1>
            <p className="text-xs text-slate-500">
              Live conversion attribution, blended ROAS, and campaign scaling from your multi-pixel setup.
            </p>
          </div>

          <div className="flex items-center gap-2">
            <Link
              href={appRoute('/help?guide=ads-report', searchParams)}
              target="_blank"
              className="px-3 py-2 bg-indigo-50 border border-indigo-200 hover:bg-indigo-100 text-indigo-700 rounded-xl text-xs font-semibold flex items-center gap-1.5 transition-colors"
              title="Open Ads Report Guide in Help Center"
            >
              <i className="fa-solid fa-book-open text-xs text-indigo-600" />
              <span>Guide</span>
            </Link>

            <select
              value={dateRange}
              onChange={(e) => setDateRange(e.target.value)}
              className="px-3 py-2 bg-white rounded-xl border border-slate-200 text-xs font-semibold text-slate-700 shadow-2xs focus:outline-none focus:ring-2 focus:ring-blue-500/20"
            >
              <option value="Today">Today</option>
              <option value="Yesterday">Yesterday</option>
              <option value="Last 7 days">Last 7 days</option>
              <option value="Last 30 days">Last 30 days</option>
              <option value="Lifetime">Lifetime</option>
            </select>

            <button
              onClick={() => {
                if (maxCampaigns !== null && campaigns.length >= maxCampaigns) {
                  alert(`Your Free Plan allows a maximum of ${maxCampaigns} Facebook Basic Ad Campaign. You have already reached your limit. Additional campaigns will be available in future plans.`);
                  return;
                }
                setShowCreateModal(true);
              }}
              className="px-4 py-2 bg-slate-900 hover:bg-slate-800 text-white rounded-xl text-xs font-bold flex items-center gap-1.5 shadow-xs transition-colors cursor-pointer"
            >
              <i className="fa-solid fa-plus text-xs" />
              <span>+ New Campaign</span>
            </button>
          </div>
        </div>

        {/* Plan Campaign Usage Card */}
        <div className="bg-white border border-slate-200/80 rounded-2xl p-4 sm:p-5 flex flex-col sm:flex-row items-center justify-between gap-4 shadow-xs">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center font-bold">
              <i className="fa-solid fa-layer-group text-base" />
            </div>
            <div>
              <div className="text-xs font-bold text-slate-900">
                Campaign Slots: {campaigns.length} / {maxCampaigns !== null ? maxCampaigns : 'Unlimited'} Active ({activePlan})
              </div>
              <div className="text-[11px] text-slate-500 mt-0.5">
                Included in your {activePlan} tier. Real-time CAPI tracking is synced across all campaigns.
              </div>
            </div>
          </div>
          <div className="w-full sm:w-56 bg-slate-100 rounded-full h-2.5 overflow-hidden">
            <div
              className="bg-blue-600 h-full rounded-full transition-all duration-500"
              style={{ width: `${maxCampaigns ? Math.min((campaigns.length / maxCampaigns) * 100, 100) : 100}%` }}
            />
          </div>
        </div>

        {/* 4 Summary Stats */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs space-y-2 hover:shadow-sm transition-shadow">
            <div className="flex items-center justify-between">
              <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">
                Total Ad Spend
              </span>
              <div className="w-7 h-7 rounded-lg bg-slate-100 text-slate-600 flex items-center justify-center">
                <i className="fa-solid fa-dollar-sign text-sm" />
              </div>
            </div>
            <div className="text-2xl font-black text-slate-900">
              ${totalSpend.toLocaleString('en-US', { minimumFractionDigits: 2 })}
            </div>
            <div className="text-[11px] text-slate-400 font-medium">{dateRange}</div>
          </div>

          <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs space-y-2 hover:shadow-sm transition-shadow">
            <div className="flex items-center justify-between">
              <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">
                Attributed Revenue
              </span>
              <div className="w-7 h-7 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center">
                <i className="fa-solid fa-bag-shopping text-sm" />
              </div>
            </div>
            <div className="text-2xl font-black text-emerald-600">
              ${totalRevenue.toLocaleString('en-US', { minimumFractionDigits: 2 })}
            </div>
            <div className="text-[11px] text-emerald-700 font-semibold flex items-center gap-1">
              <i className="fa-solid fa-circle-check text-xs" />
              <span>{totalPurchases} Orders Tracked</span>
            </div>
          </div>

          <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs space-y-2 hover:shadow-sm transition-shadow">
            <div className="flex items-center justify-between">
              <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">
                Blended ROAS
              </span>
              <div className="w-7 h-7 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">
                <i className="fa-solid fa-arrow-trend-up text-sm" />
              </div>
            </div>
            <div className="text-2xl font-black text-blue-600 flex items-center gap-2">
              <span>{overallRoas}x</span>
              {parseFloat(overallRoas) > 1.0 && (
                <span className="text-[10px] px-2 py-0.5 rounded-full bg-blue-50 text-blue-700 font-bold border border-blue-200/60 shadow-2xs">
                  Profitable
                </span>
              )}
            </div>
            <div className="text-[11px] text-slate-400 font-medium">Return On Ad Spend</div>
          </div>

          <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs space-y-2 hover:shadow-sm transition-shadow">
            <div className="flex items-center justify-between">
              <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">
                Traffic &amp; CTR
              </span>
              <div className="w-7 h-7 rounded-lg bg-purple-50 text-purple-600 flex items-center justify-center">
                <i className="fa-solid fa-arrow-pointer text-sm" />
              </div>
            </div>
            <div className="text-2xl font-black text-slate-900">
              {totalClicks.toLocaleString()} <span className="text-xs font-semibold text-slate-400">clicks</span>
            </div>
            <div className="text-[11px] text-slate-400 font-medium">
              {(totalClicks / (totalImpressions || 1) * 100).toFixed(2)}% Avg CTR • {totalImpressions.toLocaleString()} views
            </div>
          </div>
        </div>

        {/* Campaigns Table */}
        <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
          <div className="p-4 sm:p-5 border-b border-slate-100 flex items-center justify-between">
            <div>
              <h3 className="text-sm font-bold text-slate-900">Active Meta Ad Campaigns</h3>
              <p className="text-xs text-slate-500">Live data synced from Meta Marketing API {META_CONFIG.graphVersion}</p>
            </div>
            <a
              href="https://adsmanager.facebook.com"
              target="_blank"
              rel="noreferrer"
              className="text-xs font-bold text-blue-600 hover:text-blue-700 flex items-center gap-1"
            >
              <span>Meta Ads Manager</span>
              <i className="fa-solid fa-arrow-up-right-from-square text-[10px]" />
            </a>
          </div>

          <div className="overflow-x-auto">
            <table className="w-full text-left border-collapse text-xs min-w-[750px]">
              <thead>
                <tr className="border-b border-slate-100 bg-slate-50/75 text-[11px] font-bold text-slate-500 uppercase tracking-wider">
                  <th className="py-3 px-4">Status</th>
                  <th className="py-3 px-4">Campaign Name</th>
                  <th className="py-3 px-4">Daily Budget</th>
                  <th className="py-3 px-4">Spend</th>
                  <th className="py-3 px-4">Impressions</th>
                  <th className="py-3 px-4">Clicks (CTR)</th>
                  <th className="py-3 px-4">Purchases</th>
                  <th className="py-3 px-4">Revenue</th>
                  <th className="py-3 px-4">ROAS</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100 text-slate-700">
                {campaigns.length === 0 ? (
                  <tr>
                    <td colSpan={9} className="py-12 text-center">
                      <div className="max-w-sm mx-auto space-y-2">
                        <div className="w-10 h-10 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center mx-auto">
                          <i className="fa-solid fa-arrow-trend-up text-lg" />
                        </div>
                        <p className="text-sm font-bold text-slate-900">No Active Campaigns</p>
                        <p className="text-xs text-slate-500">
                          Create a campaign using the &ldquo;+ New Campaign&rdquo; button above or connect your Meta Ads Manager.
                        </p>
                      </div>
                    </td>
                  </tr>
                ) : (
                  campaigns.map((c) => (
                    <tr key={c.id} className="hover:bg-slate-50/80 transition-colors">
                      <td className="py-3.5 px-4">
                        <button
                          onClick={() => toggleStatus(c.id)}
                          className={`px-2 py-0.5 rounded-full text-[10px] font-bold flex items-center gap-1 transition-all ${
                            c.status === 'ACTIVE'
                              ? 'bg-emerald-50 text-emerald-700 border border-emerald-200 hover:bg-emerald-100'
                              : 'bg-slate-100 text-slate-600 border border-slate-200 hover:bg-slate-200'
                          }`}
                        >
                          {c.status === 'ACTIVE' ? (
                            <>
                              <i className="fa-solid fa-play text-[9px]" />
                              <span>ACTIVE</span>
                            </>
                          ) : (
                            <>
                              <i className="fa-solid fa-pause text-[9px]" />
                              <span>PAUSED</span>
                            </>
                          )}
                        </button>
                      </td>
                      <td className="py-3.5 px-4 font-semibold text-slate-900 max-w-xs truncate">
                        <div>{c.name}</div>
                        <div className="text-[10px] font-mono text-slate-400">{c.id}</div>
                      </td>
                      <td className="py-3.5 px-4 font-medium text-slate-800">${c.budget.toFixed(2)}/day</td>
                      <td className="py-3.5 px-4 font-medium text-slate-800">${c.spend.toFixed(2)}</td>
                      <td className="py-3.5 px-4">{c.impressions.toLocaleString()}</td>
                      <td className="py-3.5 px-4">
                        <div>{c.clicks.toLocaleString()}</div>
                        <div className="text-[10px] text-slate-400">CTR {c.ctr}% • CPC ${c.cpc}</div>
                      </td>
                      <td className="py-3.5 px-4 font-bold text-slate-900">{c.purchases}</td>
                      <td className="py-3.5 px-4 font-bold text-emerald-600">${c.revenue.toFixed(2)}</td>
                      <td className="py-3.5 px-4">
                        <span className="px-2 py-0.5 rounded-md font-extrabold bg-blue-50 text-blue-700 border border-blue-100">
                          {c.roas.toFixed(2)}x
                        </span>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {/* CREATE CAMPAIGN MODAL */}
      {showCreateModal && (
        <div className="fixed inset-0 z-50 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center p-3 sm:p-4">
          <div className="bg-white rounded-2xl shadow-xl border border-slate-200 max-w-md w-full max-h-[90vh] overflow-y-auto p-4 sm:p-6 space-y-4 animate-in fade-in zoom-in-95">
            <div className="flex items-center justify-between border-b border-slate-100 pb-3">
              <div className="flex items-center gap-2">
                <div className="w-7 h-7 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center font-bold">
                  <i className="fa-solid fa-arrow-trend-up text-sm" />
                </div>
                <h3 className="text-sm font-bold text-slate-900">Create Facebook Ad Campaign</h3>
              </div>
              <button
                onClick={() => setShowCreateModal(false)}
                className="text-slate-400 hover:text-slate-600"
              >
                <i className="fa-solid fa-xmark text-sm" />
              </button>
            </div>

            <form onSubmit={handleCreateCampaign} className="space-y-4 text-xs">
              <div className="space-y-1">
                <label className="font-semibold text-slate-700">Campaign Name</label>
                <input
                  type="text"
                  required
                  placeholder="e.g. Summer Sale 2026 - Advantage+ Shopping"
                  value={newCampaignName}
                  onChange={(e) => setNewCampaignName(e.target.value)}
                  className="w-full px-3 py-2 border border-slate-200 rounded-xl focus:outline-none focus:ring-1 focus:ring-slate-900"
                />
              </div>

              <div className="space-y-1">
                <label className="font-semibold text-slate-700">Campaign Objective</label>
                <select
                  value={newObjective}
                  onChange={(e) => setNewObjective(e.target.value)}
                  className="w-full px-3 py-2 border border-slate-200 rounded-xl bg-white focus:outline-none focus:ring-1 focus:ring-slate-900"
                >
                  <option value="OUTCOME_SALES">Sales / Conversions (Optimized for Purchases)</option>
                  <option value="OUTCOME_TRAFFIC">Website Traffic</option>
                  <option value="OUTCOME_ENGAGEMENT">Engagement &amp; Video Views</option>
                </select>
              </div>

              <div className="space-y-1">
                <label className="font-semibold text-slate-700">Daily Budget (USD)</label>
                <input
                  type="number"
                  min="5"
                  step="5"
                  value={newBudget}
                  onChange={(e) => setNewBudget(e.target.value)}
                  className="w-full px-3 py-2 border border-slate-200 rounded-xl focus:outline-none focus:ring-1 focus:ring-slate-900"
                />
              </div>

              <div className="p-3 bg-blue-50/70 border border-blue-100 rounded-xl text-[11px] text-blue-700 flex items-start gap-2">
                <i className="fa-solid fa-circle-check text-blue-600 text-sm shrink-0 mt-0.5" />
                <span>
                  This campaign will automatically connect with your active Shopify Multi-Pixel &amp; CAPI tracking for 100% server signal attribution.
                </span>
              </div>

              <div className="flex items-center justify-end gap-2 pt-2">
                <button
                  type="button"
                  onClick={() => setShowCreateModal(false)}
                  className="px-4 py-2 rounded-xl text-slate-600 hover:bg-slate-100 font-semibold"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 bg-slate-900 hover:bg-slate-800 text-white rounded-xl font-bold shadow-sm"
                >
                  Launch Campaign
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </AppLayout>
  );
}