"use client";

import { useEffect, useState } from "react";
import { useBrand } from "@/context/brand-context";
import { Building2, Globe, Save, Check, Loader2 } from "lucide-react";
import Link from "next/link";

export default function WorkspaceTab() {
  const { brand, brands } = useBrand();
  const [toast, setToast] = useState<string | null>(null);

  return (
    <div className="space-y-6">
      {/* Brand list */}
      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        <div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
          <div className="flex items-center gap-2"><Building2 className="w-4 h-4 text-brand-600" /><h2 className="font-bold text-slate-800 text-sm">Brands</h2></div>
          <Link href="/website-upload" className="text-xs font-semibold text-brand-600 hover:text-brand-800">+ Add Brand</Link>
        </div>
        <div className="divide-y divide-slate-100">
          {brands.map((b) => (
            <div key={b.id} className="px-6 py-3 flex items-center gap-3">
              <div className={`w-8 h-8 rounded-lg ${b.color} flex items-center justify-center shrink-0`}>
                <span className="text-[10px] font-bold text-white">{b.initials}</span>
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-semibold text-slate-900">{b.name}</p>
                <p className="text-xs text-slate-500">{b.domain}</p>
              </div>
              <span className={`text-[9px] font-bold uppercase tracking-wider rounded-full px-2 py-0.5 ${b.id === brand.id ? "bg-brand-50 text-brand-700" : "bg-slate-100 text-slate-500"}`}>
                {b.id === brand.id ? "Active" : "Switch"}
              </span>
            </div>
          ))}
          {brands.length === 0 && <div className="px-6 py-8 text-center text-xs text-slate-400">No brands yet.</div>}
        </div>
      </div>

      {/* Integrations summary */}
      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        <div className="px-6 py-4 border-b border-slate-100 flex items-center gap-2">
          <Globe className="w-4 h-4 text-brand-600" />
          <h2 className="font-bold text-slate-800 text-sm">Integrations</h2>
        </div>
        <div className="px-6 py-5">
          <p className="text-sm text-slate-600 mb-3">Manage your Google Search Console, Analytics, and Business Profile connections.</p>
          <Link href="/integrations" className="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg border border-slate-200 text-xs font-semibold text-slate-700 hover:bg-slate-50">
            Manage Integrations
          </Link>
        </div>
      </div>

      {/* Client Portal summary */}
      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        <div className="px-6 py-4 border-b border-slate-100 flex items-center gap-2">
          <Globe className="w-4 h-4 text-brand-600" />
          <h2 className="font-bold text-slate-800 text-sm">Client Portal</h2>
        </div>
        <div className="px-6 py-5">
          <p className="text-sm text-slate-600 mb-3">Configure white-label client portals for your brands.</p>
          <Link href="/client-portal-setup" className="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg border border-slate-200 text-xs font-semibold text-slate-700 hover:bg-slate-50">
            Portal Settings
          </Link>
        </div>
      </div>

      {toast && <div className="fixed top-4 right-4 z-50 px-4 py-2 rounded-lg bg-slate-900 text-white text-xs font-semibold shadow-lg">{toast}</div>}
    </div>
  );
}
