'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { SHOPIFY_CONFIG } from '@/config/shopify';
import { META_CONFIG } from '@/config/meta';
import { apiUrl, appRoute } from '@/lib/utils/asset';

interface StoreProfile {
  id: string;
  domain: string;
  status: string;
  plan: string;
}

export default function Header() {
  const [store, setStore] = useState<StoreProfile | null>(null);

  useEffect(() => {
    fetch(apiUrl('/api/shops'))
      .then((r) => r.json())
      .then((data) => {
        if (data.success && data.store) {
          setStore(data.store);
        }
      })
      .catch(console.error);
  }, []);

  const currentDomain = store?.domain || SHOPIFY_CONFIG.defaultShopDomain;
  const currentPlan = store?.plan || 'growth';


  return (
    <header className="h-16 bg-white border-b border-slate-200 px-8 flex items-center justify-between sticky top-0 z-20">
      {/* Authenticated Store Identity */}
      <div className="flex items-center gap-3">
        <div className="w-8 h-8 rounded-lg bg-emerald-50 border border-emerald-200/60 flex items-center justify-center text-emerald-700 shrink-0">
          <i className="fa-solid fa-store text-sm" />
        </div>
        <div>
          <div className="flex items-center gap-2">
            <span className="font-semibold text-sm text-slate-900">{currentDomain}</span>
            <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-emerald-50 text-emerald-700 border border-emerald-200/60">
              <i className="fa-solid fa-circle-check text-emerald-500 text-[10px]" /> Active Store
            </span>
          </div>
          <div className="flex items-center gap-2 text-[11px] text-slate-400">
            <Link
              href={appRoute('/pricing', currentDomain ? `shop=${encodeURIComponent(currentDomain)}` : null)}
              className="text-theme hover:underline font-medium capitalize flex items-center gap-1"
            >
              <i className="fa-solid fa-credit-card text-[11px]" />
              <span>{currentPlan} Plan</span>
            </Link>
            <span>· Authenticated Store Session</span>
          </div>
        </div>
      </div>

      {/* Action links */}
      <div className="flex items-center gap-3">
        <a
          href={apiUrl(`/api/catalog/feed/meta.xml?shop=${encodeURIComponent(currentDomain)}`)}
          target="_blank"
          className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-slate-100 hover:bg-slate-200 text-slate-700 transition-colors"
        >
          <span>Live Feed XML</span>
          <i className="fa-solid fa-arrow-up-right-from-square text-xs text-slate-500" />
        </a>
        <div className="h-4 w-px bg-slate-200" />
        <div className="text-right">
          <div className="text-xs font-semibold text-slate-700 flex items-center gap-1">
            <i className="fa-solid fa-shield-halved text-xs text-theme" />
            <span>Meta Commerce</span>
          </div>
          <div className="text-[11px] text-slate-400">Graph API {META_CONFIG.graphVersion}</div>
        </div>
      </div>
    </header>
  );
}