import React, { useState, useEffect } from 'react';
import {
  TrendingUp,
  Briefcase,
  DollarSign,
  PieChart,
  Edit3,
  Trash2,
  Plus,
  RefreshCw,
  Search,
  CheckCircle,
  AlertTriangle,
  FileSpreadsheet,
  Layers,
  ArrowUpRight,
  ArrowDownRight,
  Sliders,
  Building2,
  X,
  Check,
  Zap,
  Info,
  ShieldCheck
} from 'lucide-react';
import { InvestmentSecurity, InvestmentCategory, InvestmentReconciliation, BranchId, User } from '../types';
import { BRANCHES_LIST } from '../types';

interface InvestmentsPortfolioViewProps {
  currentUser: User | null;
  activePeriod: string;
}

export const InvestmentsPortfolioView: React.FC<InvestmentsPortfolioViewProps> = ({
  currentUser,
  activePeriod,
}) => {
  const isHO = currentUser?.role === 'admin';
  const branchId = currentUser?.branchId;

  const [investments, setInvestments] = useState<InvestmentSecurity[]>([]);
  const [reconciliations, setReconciliations] = useState<InvestmentReconciliation[]>([]);
  const [grandTotals, setGrandTotals] = useState<any>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [activeTab, setActiveTab] = useState<'securities' | 'reconciliation' | 'mtm_pricing'>('securities');

  // Filters
  const [searchQuery, setSearchQuery] = useState<string>('');
  const [selectedBranchFilter, setSelectedBranchFilter] = useState<string>(isHO ? 'all' : branchId || 'all');
  const [selectedCategoryFilter, setSelectedCategoryFilter] = useState<string>('all');

  // Modals state
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [editingSecurity, setEditingSecurity] = useState<Partial<InvestmentSecurity> | null>(null);

  // Bulk MTM Modal / Form state
  const [bulkIsin, setBulkIsin] = useState<string>('');
  const [bulkMtmPrice, setBulkMtmPrice] = useState<string>('');
  const [bulkMtmYield, setBulkMtmYield] = useState<string>('');
  const [mtmSuccessMsg, setMtmSuccessMsg] = useState<string>('');

  useEffect(() => {
    if (!isHO && branchId) {
      setSelectedBranchFilter(branchId);
    }
  }, [currentUser, isHO, branchId]);

  const fetchInvestments = async () => {
    setLoading(true);
    try {
      const url = !isHO && branchId ? `/api/investments?branchId=${branchId}` : (selectedBranchFilter !== 'all' ? `/api/investments?branchId=${selectedBranchFilter}` : '/api/investments');
      const res = await fetch(url);
      const data = await res.json();
      setInvestments(data.investments || []);

      // Fetch reconciliation
      const reconRes = await fetch(`/api/investments/reconciliation?period=${activePeriod}`);
      const reconData = await reconRes.json();
      setReconciliations(reconData.reconciliations || []);
      setGrandTotals(reconData.grandTotals || null);
    } catch (err) {
      console.error('Failed to fetch investments:', err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchInvestments();
  }, [currentUser, activePeriod, selectedBranchFilter]);

  // Handle Add/Edit Security Save
  const handleSaveSecurity = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!editingSecurity) return;

    try {
      const res = await fetch('/api/investments', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...editingSecurity,
          branchId: editingSecurity.branchId || branchId || 'bahrain',
          faceValue: Number(editingSecurity.faceValue || 0),
          amountInvested: Number(editingSecurity.amountInvested || 0),
          couponRate: Number(editingSecurity.couponRate || 0),
          originalPrice: Number(editingSecurity.originalPrice || 100),
          purchaseYield: Number(editingSecurity.purchaseYield || 0),
        }),
      });

      if (res.ok) {
        setIsModalOpen(false);
        setEditingSecurity(null);
        fetchInvestments();
      } else {
        const err = await res.json();
        alert(`Error: ${err.error || 'Failed to save security'}`);
      }
    } catch (err) {
      console.error('Save security error:', err);
    }
  };

  // Handle Delete Security
  const handleDeleteSecurity = async (id: string) => {
    if (!confirm('Are you sure you want to delete this security from the portfolio?')) return;
    try {
      const res = await fetch(`/api/investments/${id}`, { method: 'DELETE' });
      if (res.ok) {
        fetchInvestments();
      }
    } catch (err) {
      console.error('Delete security error:', err);
    }
  };

  // Handle HO Bulk MTM Price Update
  const handleBulkMtmSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!bulkIsin || !bulkMtmPrice) return;

    try {
      const res = await fetch('/api/investments/bulk-mtm', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          isin: bulkIsin.trim(),
          mtmPrice: Number(bulkMtmPrice),
          mtmYield: bulkMtmYield ? Number(bulkMtmYield) : undefined,
          updatedBy: currentUser?.name || 'Head Office Admin',
        }),
      });

      if (res.ok) {
        const data = await res.json();
        setMtmSuccessMsg(data.message || 'MTM prices updated successfully');
        setTimeout(() => setMtmSuccessMsg(''), 4000);
        setBulkIsin('');
        setBulkMtmPrice('');
        setBulkMtmYield('');
        fetchInvestments();
      }
    } catch (err) {
      console.error('Bulk MTM error:', err);
    }
  };

  // Filtered Securities
  const filteredSecurities = investments.filter((sec) => {
    const matchesBranch = selectedBranchFilter === 'all' || sec.branchId === selectedBranchFilter;
    const matchesCategory = selectedCategoryFilter === 'all' || sec.category === selectedCategoryFilter;
    const q = searchQuery.toLowerCase();
    const matchesSearch =
      !q ||
      sec.isin?.toLowerCase().includes(q) ||
      sec.securityType?.toLowerCase().includes(q) ||
      sec.country?.toLowerCase().includes(q);

    return matchesBranch && matchesCategory && matchesSearch;
  });

  // KPI Calculations
  const totalFaceValue = filteredSecurities.reduce((acc, s) => acc + (s.faceValue || 0), 0);
  const totalAmountInvested = filteredSecurities.reduce((acc, s) => acc + (s.amountInvested || 0), 0);
  const totalMtmPnL = filteredSecurities.reduce((acc, s) => acc + (s.mtmPnL || 0), 0);
  const totalMtmValue = filteredSecurities.reduce((acc, s) => {
    const mtm = s.mtmPrice !== undefined ? (s.faceValue * s.mtmPrice) / 100 : s.amountInvested;
    return acc + mtm;
  }, 0);

  // Unique ISINs count
  const uniqueIsins = new Set(investments.map((s) => s.isin)).size;

  return (
    <div className="space-y-6">
      {/* Top Banner / Header */}
      <div className="holo-card p-6 rounded-2xl bg-slate-900/90 border border-slate-700/80 shadow-2xl relative overflow-hidden">
        <div className="absolute top-0 right-0 w-96 h-96 bg-cyan-500/10 rounded-full blur-3xl pointer-events-none" />
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 relative z-10">
          <div>
            <div className="flex items-center gap-3">
              <div className="p-3 bg-gradient-to-br from-cyan-500/20 to-blue-600/20 border border-cyan-500/30 rounded-xl text-cyan-400">
                <Briefcase className="w-7 h-7" />
              </div>
              <div>
                <h1 className="text-2xl font-bold text-slate-100 flex items-center gap-2">
                  Investments Portfolio
                  <span className="text-xs px-2.5 py-0.5 rounded-full bg-cyan-500/10 border border-cyan-500/30 text-cyan-300 font-mono">
                    {isHO ? 'Global Consolidated' : `${currentUser?.branchId?.toUpperCase()} Branch`}
                  </span>
                </h1>
                <p className="text-sm text-slate-400 mt-0.5">
                  Complete portfolio management (HTM, AFS, HFT) with Head Office MTM revaluation & Balance Sheet reconciliation
                </p>
              </div>
            </div>
          </div>

          <div className="flex items-center gap-3">
            <button
              onClick={fetchInvestments}
              className="px-3.5 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 text-sm font-medium flex items-center gap-2 transition-all"
            >
              <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin text-cyan-400' : ''}`} />
              Refresh
            </button>

            <button
              onClick={() => {
                setEditingSecurity({
                  branchId: (branchId || 'bahrain') as BranchId,
                  country: BRANCHES_LIST.find((b) => b.id === (branchId || 'bahrain'))?.country || 'Bahrain',
                  category: 'AFS',
                  isin: '',
                  securityType: '',
                  faceValue: 0,
                  amountInvested: 0,
                  couponRate: 0,
                  issueDate: '',
                  purchaseDate: '',
                  maturityDate: '',
                  originalPrice: 100,
                });
                setIsModalOpen(true);
              }}
              className="px-4 py-2 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-white font-medium text-sm shadow-lg shadow-cyan-500/20 flex items-center gap-2 transition-all"
            >
              <Plus className="w-4 h-4" />
              Add Security
            </button>
          </div>
        </div>
      </div>

      {/* KPI Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="holo-card p-5 rounded-2xl bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition-all">
          <div className="flex items-center justify-between text-slate-400 text-xs font-semibold uppercase tracking-wider mb-2">
            <span>Total Face Value</span>
            <Layers className="w-4 h-4 text-cyan-400" />
          </div>
          <div className="text-2xl font-bold text-slate-100 font-mono">
            USD {totalFaceValue.toFixed(2)} <span className="text-sm font-normal text-slate-400">Mn</span>
          </div>
          <div className="text-xs text-slate-400 mt-2 flex items-center gap-1">
            <span className="text-cyan-400 font-semibold">{filteredSecurities.length}</span> active portfolio holdings
          </div>
        </div>

        <div className="holo-card p-5 rounded-2xl bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition-all">
          <div className="flex items-center justify-between text-slate-400 text-xs font-semibold uppercase tracking-wider mb-2">
            <span>Book Value (Invested)</span>
            <DollarSign className="w-4 h-4 text-emerald-400" />
          </div>
          <div className="text-2xl font-bold text-emerald-400 font-mono">
            USD {totalAmountInvested.toFixed(2)} <span className="text-sm font-normal text-slate-400">Mn</span>
          </div>
          <div className="text-xs text-slate-400 mt-2 flex items-center gap-1">
            <span>Reconciles with Balance Sheet Investments</span>
          </div>
        </div>

        <div className="holo-card p-5 rounded-2xl bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition-all">
          <div className="flex items-center justify-between text-slate-400 text-xs font-semibold uppercase tracking-wider mb-2">
            <span>MTM Market Value</span>
            <TrendingUp className="w-4 h-4 text-purple-400" />
          </div>
          <div className="text-2xl font-bold text-purple-300 font-mono">
            USD {totalMtmValue.toFixed(2)} <span className="text-sm font-normal text-slate-400">Mn</span>
          </div>
          <div className="text-xs text-slate-400 mt-2 flex items-center gap-1">
            <span>HO Mark-to-Market revalued</span>
          </div>
        </div>

        <div className="holo-card p-5 rounded-2xl bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition-all">
          <div className="flex items-center justify-between text-slate-400 text-xs font-semibold uppercase tracking-wider mb-2">
            <span>Unrealized MTM P&L</span>
            {totalMtmPnL >= 0 ? (
              <ArrowUpRight className="w-4 h-4 text-emerald-400" />
            ) : (
              <ArrowDownRight className="w-4 h-4 text-rose-400" />
            )}
          </div>
          <div
            className={`text-2xl font-bold font-mono ${
              totalMtmPnL >= 0 ? 'text-emerald-400' : 'text-rose-400'
            }`}
          >
            {totalMtmPnL >= 0 ? '+' : ''}${(totalMtmPnL / 1000000).toFixed(2)}{' '}
            <span className="text-sm font-normal text-slate-400">Mn</span>
          </div>
          <div className="text-xs text-slate-400 mt-2 font-mono">
            (${totalMtmPnL.toLocaleString('en-US', { maximumFractionDigits: 0 })})
          </div>
        </div>
      </div>

      {/* Navigation Tabs */}
      <div className="flex items-center justify-between border-b border-slate-800 pb-3">
        <div className="flex items-center gap-2">
          <button
            onClick={() => setActiveTab('securities')}
            className={`px-4 py-2.5 rounded-xl font-medium text-sm flex items-center gap-2 transition-all ${
              activeTab === 'securities'
                ? 'bg-cyan-500/20 text-cyan-300 border border-cyan-500/30'
                : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/50'
            }`}
          >
            <Briefcase className="w-4 h-4" />
            Securities Master ({filteredSecurities.length})
          </button>

          <button
            onClick={() => setActiveTab('reconciliation')}
            className={`px-4 py-2.5 rounded-xl font-medium text-sm flex items-center gap-2 transition-all ${
              activeTab === 'reconciliation'
                ? 'bg-cyan-500/20 text-cyan-300 border border-cyan-500/30'
                : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/50'
            }`}
          >
            <CheckCircle className="w-4 h-4" />
            Balance Sheet Reconciliation
            {grandTotals && !grandTotals.isMatched && (
              <span className="w-2 h-2 rounded-full bg-amber-400 animate-ping" />
            )}
          </button>

          {isHO && (
            <button
              onClick={() => setActiveTab('mtm_pricing')}
              className={`px-4 py-2.5 rounded-xl font-medium text-sm flex items-center gap-2 transition-all ${
                activeTab === 'mtm_pricing'
                  ? 'bg-cyan-500/20 text-cyan-300 border border-cyan-500/30'
                  : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/50'
              }`}
            >
              <Zap className="w-4 h-4 text-amber-400" />
              HO Bulk MTM Pricing Tool
            </button>
          )}
        </div>

        <div className="text-xs text-slate-400 hidden sm:block">
          <span className="text-slate-300 font-semibold">{uniqueIsins}</span> Unique ISINs tracked
        </div>
      </div>

      {/* TAB 1: SECURITIES MASTER TABLE */}
      {activeTab === 'securities' && (
        <div className="space-y-4">
          {/* Controls Bar */}
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-slate-900/60 p-4 rounded-xl border border-slate-800">
            <div className="flex-1 relative">
              <Search className="w-4 h-4 text-slate-500 absolute left-3.5 top-1/2 -translate-y-1/2" />
              <input
                type="text"
                placeholder="Search ISIN, Security Description, or Country..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-10 pr-4 py-2 rounded-xl bg-slate-950/80 border border-slate-700/80 text-slate-200 text-sm focus:outline-none focus:border-cyan-500"
              />
            </div>

            <div className="flex flex-wrap items-center gap-3">
              {isHO ? (
                <div className="flex items-center gap-2">
                  <span className="text-xs text-slate-400">Branch:</span>
                  <select
                    value={selectedBranchFilter}
                    onChange={(e) => setSelectedBranchFilter(e.target.value)}
                    className="py-2 px-3 rounded-xl bg-slate-950 border border-slate-700 text-slate-200 text-sm focus:outline-none focus:border-cyan-500"
                  >
                    <option value="all">All Branches</option>
                    {BRANCHES_LIST.map((b) => (
                      <option key={b.id} value={b.id}>
                        {b.name}
                      </option>
                    ))}
                  </select>
                </div>
              ) : (
                <div className="flex items-center gap-2 bg-slate-950 px-3 py-1.5 rounded-xl border border-cyan-500/30 text-xs text-cyan-300 font-mono">
                  <ShieldCheck className="w-3.5 h-3.5 text-cyan-400" />
                  <span>Branch Scope: {BRANCHES_LIST.find((b) => b.id === branchId)?.name || branchId?.toUpperCase()}</span>
                </div>
              )}

              <div className="flex items-center gap-2">
                <span className="text-xs text-slate-400">Category:</span>
                <select
                  value={selectedCategoryFilter}
                  onChange={(e) => setSelectedCategoryFilter(e.target.value)}
                  className="py-2 px-3 rounded-xl bg-slate-950 border border-slate-700 text-slate-200 text-sm focus:outline-none focus:border-cyan-500"
                >
                  <option value="all">All Categories</option>
                  <option value="HTM">HTM (Held-To-Maturity)</option>
                  <option value="AFS">AFS (Available-For-Sale)</option>
                  <option value="HFT">HFT (Held-For-Trading)</option>
                </select>
              </div>
            </div>
          </div>

          {/* Table */}
          <div className="overflow-x-auto rounded-2xl border border-slate-800 bg-slate-900/80 shadow-xl">
            <table className="w-full text-left border-collapse text-xs">
              <thead>
                <tr className="bg-slate-950/90 text-slate-400 font-semibold border-b border-slate-800 uppercase tracking-wider">
                  <th className="py-3.5 px-4">Branch / Country</th>
                  <th className="py-3.5 px-3">Cat</th>
                  <th className="py-3.5 px-3">ISIN / Security</th>
                  <th className="py-3.5 px-3 text-right">Face Value ($M)</th>
                  <th className="py-3.5 px-3 text-right">Amount Invested ($M)</th>
                  <th className="py-3.5 px-3 text-right">Coupon %</th>
                  <th className="py-3.5 px-3">Maturity Date</th>
                  <th className="py-3.5 px-3 text-right">Orig Price %</th>
                  <th className="py-3.5 px-3 text-right bg-cyan-950/30 text-cyan-300">HO MTM Price %</th>
                  <th className="py-3.5 px-3 text-right bg-cyan-950/30 text-cyan-300">MTM Yield %</th>
                  <th className="py-3.5 px-3 text-right">MTM P&L ($)</th>
                  <th className="py-3.5 px-3 text-center">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-800/60 font-mono text-slate-300">
                {filteredSecurities.length === 0 ? (
                  <tr>
                    <td colSpan={12} className="py-12 text-center text-slate-500 font-sans">
                      No investment securities match the selected filters.
                    </td>
                  </tr>
                ) : (
                  filteredSecurities.map((sec) => {
                    const branchObj = BRANCHES_LIST.find((b) => b.id === sec.branchId);
                    return (
                      <tr key={sec.id} className="hover:bg-slate-800/50 transition-colors">
                        <td className="py-3 px-4 font-sans font-medium text-slate-200">
                          <div>{branchObj?.name || sec.country}</div>
                          <div className="text-[10px] text-slate-500">{sec.country}</div>
                        </td>

                        <td className="py-3 px-3">
                          <span
                            className={`px-2 py-0.5 rounded text-[10px] font-semibold ${
                              sec.category === 'HTM'
                                ? 'bg-amber-500/10 text-amber-300 border border-amber-500/30'
                                : sec.category === 'AFS'
                                ? 'bg-cyan-500/10 text-cyan-300 border border-cyan-500/30'
                                : 'bg-purple-500/10 text-purple-300 border border-purple-500/30'
                            }`}
                          >
                            {sec.category}
                          </span>
                        </td>

                        <td className="py-3 px-3 font-sans">
                          <div className="font-mono text-cyan-400 font-semibold text-xs">{sec.isin}</div>
                          <div className="text-slate-300 text-[11px] truncate max-w-[200px]" title={sec.securityType}>
                            {sec.securityType}
                          </div>
                        </td>

                        <td className="py-3 px-3 text-right font-bold text-slate-100">
                          {sec.faceValue.toFixed(2)}
                        </td>

                        <td className="py-3 px-3 text-right font-bold text-emerald-400">
                          {sec.amountInvested.toFixed(2)}
                        </td>

                        <td className="py-3 px-3 text-right text-slate-300">
                          {sec.couponRate ? `${sec.couponRate.toFixed(2)}%` : '—'}
                        </td>

                        <td className="py-3 px-3 font-sans text-slate-400">{sec.maturityDate}</td>

                        <td className="py-3 px-3 text-right text-slate-300">
                          {sec.originalPrice ? sec.originalPrice.toFixed(3) : '100.000'}
                        </td>

                        <td className="py-3 px-3 text-right font-bold text-cyan-300 bg-cyan-950/20">
                          {sec.mtmPrice !== undefined ? sec.mtmPrice.toFixed(3) : '—'}
                        </td>

                        <td className="py-3 px-3 text-right text-cyan-200 bg-cyan-950/20">
                          {sec.mtmYield !== undefined ? `${sec.mtmYield.toFixed(2)}%` : '—'}
                        </td>

                        <td
                          className={`py-3 px-3 text-right font-bold ${
                            (sec.mtmPnL || 0) >= 0 ? 'text-emerald-400' : 'text-rose-400'
                          }`}
                        >
                          {sec.mtmPnL !== undefined
                            ? `${sec.mtmPnL >= 0 ? '+' : ''}$${Math.round(sec.mtmPnL).toLocaleString()}`
                            : '—'}
                        </td>

                        <td className="py-3 px-3 text-center font-sans">
                          <div className="flex items-center justify-center gap-1.5">
                            <button
                              onClick={() => {
                                setEditingSecurity(sec);
                                setIsModalOpen(true);
                              }}
                              className="p-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-cyan-400 transition-colors"
                              title="Edit Security"
                            >
                              <Edit3 className="w-3.5 h-3.5" />
                            </button>

                            <button
                              onClick={() => handleDeleteSecurity(sec.id)}
                              className="p-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-rose-400 transition-colors"
                              title="Delete Security"
                            >
                              <Trash2 className="w-3.5 h-3.5" />
                            </button>
                          </div>
                        </td>
                      </tr>
                    );
                  })
                )}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* TAB 2: RECONCILIATION MATRIX */}
      {activeTab === 'reconciliation' && (
        <div className="space-y-4">
          <div className="bg-slate-900/80 p-5 rounded-2xl border border-slate-800">
            <div className="flex items-center justify-between mb-4">
              <div>
                <h3 className="text-lg font-bold text-slate-100 flex items-center gap-2">
                  <CheckCircle className="w-5 h-5 text-cyan-400" />
                  Portfolio vs Balance Sheet Reconciliation
                </h3>
                <p className="text-xs text-slate-400 mt-0.5">
                  Verifies that each branch's detailed Investment Portfolio sum matches its Balance Sheet 'Investments' line item for period {activePeriod}.
                </p>
              </div>

              {grandTotals && (
                <div className="flex items-center gap-3 font-mono text-xs">
                  <span className="px-3 py-1.5 rounded-xl bg-slate-950 border border-slate-800 text-slate-300">
                    Grand Portfolio Total: <strong className="text-cyan-400">${grandTotals.portfolioTotalInvested}M</strong>
                  </span>
                  <span className="px-3 py-1.5 rounded-xl bg-slate-950 border border-slate-800 text-slate-300">
                    Grand BS Total: <strong className="text-emerald-400">${grandTotals.balanceSheetInvestments}M</strong>
                  </span>
                </div>
              )}
            </div>

            <div className="overflow-x-auto rounded-xl border border-slate-800">
              <table className="w-full text-left border-collapse text-xs font-sans">
                <thead>
                  <tr className="bg-slate-950 text-slate-400 font-semibold border-b border-slate-800 uppercase tracking-wider">
                    <th className="py-3 px-4">Branch Name</th>
                    <th className="py-3 px-3 text-center">Securities Count</th>
                    <th className="py-3 px-3 text-right">Portfolio Invested ($M)</th>
                    <th className="py-3 px-3 text-right">Balance Sheet 'Investments' ($M)</th>
                    <th className="py-3 px-3 text-right">Variance ($M)</th>
                    <th className="py-3 px-4 text-center">Reconciliation Status</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-800/60 font-mono">
                  {reconciliations.map((recon) => (
                    <tr key={recon.branchId} className="hover:bg-slate-800/40 transition-colors">
                      <td className="py-3 px-4 font-sans font-semibold text-slate-200">
                        {recon.branchName}
                      </td>

                      <td className="py-3 px-3 text-center text-slate-400">
                        {recon.securitiesCount}
                      </td>

                      <td className="py-3 px-3 text-right font-bold text-cyan-300">
                        ${recon.portfolioTotalInvested.toFixed(2)}
                      </td>

                      <td className="py-3 px-3 text-right font-bold text-emerald-400">
                        ${recon.balanceSheetInvestments.toFixed(2)}
                      </td>

                      <td
                        className={`py-3 px-3 text-right font-bold ${
                          recon.difference === 0
                            ? 'text-slate-400'
                            : recon.difference > 0
                            ? 'text-cyan-400'
                            : 'text-amber-400'
                        }`}
                      >
                        {recon.difference === 0
                          ? '$0.00'
                          : `${recon.difference > 0 ? '+' : ''}$${recon.difference.toFixed(2)}`}
                      </td>

                      <td className="py-3 px-4 text-center font-sans">
                        {recon.isMatched ? (
                          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-500/10 border border-emerald-500/30 text-emerald-400">
                            <Check className="w-3.5 h-3.5" />
                            Reconciled
                          </span>
                        ) : (
                          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-amber-500/10 border border-amber-500/30 text-amber-300">
                            <AlertTriangle className="w-3.5 h-3.5" />
                            Mismatch (${Math.abs(recon.difference).toFixed(2)}M)
                          </span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}

      {/* TAB 3: HO BULK MTM PRICING TOOL */}
      {activeTab === 'mtm_pricing' && isHO && (
        <div className="space-y-6">
          <div className="holo-card p-6 rounded-2xl bg-slate-900/90 border border-slate-800">
            <h3 className="text-lg font-bold text-slate-100 flex items-center gap-2 mb-2">
              <Zap className="w-5 h-5 text-amber-400" />
              Head Office Mark-to-Market (MTM) Revaluation Feed
            </h3>
            <p className="text-xs text-slate-400 mb-6">
              Input MTM prices (% of par) or Yields for specific ISIN securities. All branches holding securities with matching ISIN will be updated and revalued automatically.
            </p>

            {mtmSuccessMsg && (
              <div className="p-3.5 mb-6 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-emerald-300 text-sm flex items-center gap-2 font-medium">
                <Check className="w-4 h-4 text-emerald-400" />
                {mtmSuccessMsg}
              </div>
            )}

            <form onSubmit={handleBulkMtmSubmit} className="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
              <div>
                <label className="block text-xs font-semibold text-slate-300 mb-1.5">
                  Select / Enter ISIN Code
                </label>
                <input
                  type="text"
                  placeholder="e.g. XS2232319638"
                  value={bulkIsin}
                  onChange={(e) => setBulkIsin(e.target.value)}
                  required
                  className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 font-mono text-cyan-300 text-sm focus:outline-none focus:border-cyan-500"
                />
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-300 mb-1.5">
                  New MTM Price (% of Par)
                </label>
                <input
                  type="number"
                  step="0.001"
                  placeholder="e.g. 100.380"
                  value={bulkMtmPrice}
                  onChange={(e) => setBulkMtmPrice(e.target.value)}
                  required
                  className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 font-mono text-emerald-400 text-sm focus:outline-none focus:border-cyan-500"
                />
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-300 mb-1.5">
                  MTM Yield % (Optional)
                </label>
                <input
                  type="number"
                  step="0.01"
                  placeholder="e.g. 7.28"
                  value={bulkMtmYield}
                  onChange={(e) => setBulkMtmYield(e.target.value)}
                  className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 font-mono text-purple-300 text-sm focus:outline-none focus:border-cyan-500"
                />
              </div>

              <div>
                <button
                  type="submit"
                  className="w-full py-2.5 px-4 rounded-xl bg-gradient-to-r from-amber-500 to-orange-600 hover:from-amber-400 hover:to-orange-500 text-white font-semibold text-sm shadow-lg shadow-amber-500/20 flex items-center justify-center gap-2 transition-all"
                >
                  <Zap className="w-4 h-4" />
                  Apply MTM Revaluation
                </button>
              </div>
            </form>
          </div>

          {/* Preset MTM Market Feed Quotes */}
          <div className="bg-slate-900/80 p-5 rounded-2xl border border-slate-800">
            <h4 className="text-sm font-bold text-slate-200 mb-3 flex items-center justify-between">
              <span>Bloomberg / Market Benchmark Reference Quotes (30-Jun-26 Feed)</span>
              <span className="text-xs font-normal text-slate-400">Click quote to auto-fill</span>
            </h4>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
              {[
                { isin: 'XS2232319638', name: 'GOP EuroBond 2031', price: 100.38, yield: 7.28 },
                { isin: 'XS1729875598', name: 'GOP EuroBond 2027', price: 100.50, yield: 6.50 },
                { isin: 'XS3353874145', name: 'GOP EuroBond 2029', price: 99.75, yield: 7.07 },
                { isin: 'XS2419405274', name: 'PAKISTAN SUKUK 7.95%', price: 99.99, yield: 7.95 },
                { isin: 'BD927251100', name: 'Bangladesh 10Y T-Bond', price: 98.45, yield: 9.71 },
                { isin: 'BD934481203', name: 'Bangladesh 20Y T-Bond', price: 109.90, yield: 10.27 },
              ].map((feed) => (
                <button
                  key={feed.isin}
                  onClick={() => {
                    setBulkIsin(feed.isin);
                    setBulkMtmPrice(feed.price.toString());
                    setBulkMtmYield(feed.yield.toString());
                  }}
                  className="p-3 rounded-xl bg-slate-950 border border-slate-800 hover:border-cyan-500/50 text-left transition-all group"
                >
                  <div className="flex items-center justify-between mb-1">
                    <span className="font-mono text-xs font-bold text-cyan-400 group-hover:text-cyan-300">
                      {feed.isin}
                    </span>
                    <span className="text-[10px] text-slate-500">Live Quote</span>
                  </div>
                  <div className="text-xs text-slate-200 font-medium">{feed.name}</div>
                  <div className="mt-2 flex items-center justify-between text-xs font-mono">
                    <span className="text-emerald-400">Price: {feed.price}%</span>
                    <span className="text-purple-300">Yield: {feed.yield}%</span>
                  </div>
                </button>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* MODAL: ADD / EDIT SECURITY */}
      {isModalOpen && editingSecurity && (
        <div className="fixed inset-0 z-50 bg-slate-950/80 backdrop-blur-md flex items-center justify-center p-4">
          <div className="bg-slate-900 border border-slate-700 rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6 shadow-2xl relative">
            <button
              onClick={() => setIsModalOpen(false)}
              className="absolute top-4 right-4 p-2 rounded-xl bg-slate-800 text-slate-400 hover:text-slate-100"
            >
              <X className="w-5 h-5" />
            </button>

            <h3 className="text-xl font-bold text-slate-100 mb-1">
              {editingSecurity.id ? 'Edit Investment Security' : 'Add Investment Security'}
            </h3>
            <p className="text-xs text-slate-400 mb-5">
              Enter complete security details for portfolio tracking & reconciliation.
            </p>

            <form onSubmit={handleSaveSecurity} className="space-y-4">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-semibold text-slate-300 mb-1">
                    Branch / Territory
                  </label>
                  <select
                    value={editingSecurity.branchId || branchId || 'bahrain'}
                    onChange={(e) =>
                      setEditingSecurity({
                        ...editingSecurity,
                        branchId: e.target.value as BranchId,
                        country: BRANCHES_LIST.find((b) => b.id === e.target.value)?.country || 'Bahrain',
                      })
                    }
                    disabled={!isHO}
                    className="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-700 text-slate-200 text-sm"
                  >
                    {BRANCHES_LIST.map((b) => (
                      <option key={b.id} value={b.id}>
                        {b.name} ({b.country})
                      </option>
                    ))}
                  </select>
                </div>

                <div>
                  <label className="block text-xs font-semibold text-slate-300 mb-1">
                    Category
                  </label>
                  <select
                    value={editingSecurity.category || 'AFS'}
                    onChange={(e) =>
                      setEditingSecurity({
                        ...editingSecurity,
                        category: e.target.value as InvestmentCategory,
                      })
                    }
                    className="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-700 text-slate-200 text-sm"
                  >
                    <option value="HTM">HTM (Held-To-Maturity)</option>
                    <option value="AFS">AFS (Available-For-Sale)</option>
                    <option value="HFT">HFT (Held-For-Trading)</option>
                  </select>
                </div>

                <div>
                  <label className="block text-xs font-semibold text-slate-300 mb-1">
                    ISIN Code
                  </label>
                  <input
                    type="text"
                    required
                    placeholder="e.g. XS2232319638"
                    value={editingSecurity.isin || ''}
                    onChange={(e) => setEditingSecurity({ ...editingSecurity, isin: e.target.value })}
                    className="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-700 font-mono text-cyan-300 text-sm"
                  />
                </div>

                <div>
                  <label className="block text-xs font-semibold text-slate-300 mb-1">
                    Security Description
                  </label>
                  <input
                    type="text"
                    required
                    placeholder="e.g. GOP EuroBond 2029"
                    value={editingSecurity.securityType || ''}
                    onChange={(e) => setEditingSecurity({ ...editingSecurity, securityType: e.target.value })}
                    className="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-700 text-slate-200 text-sm"
                  />
                </div>

                <div>
                  <label className="block text-xs font-semibold text-slate-300 mb-1">
                    Deal Currency
                  </label>
                  <select
                    value={editingSecurity.currency || 'USD'}
                    onChange={(e) =>
                      setEditingSecurity({
                        ...editingSecurity,
                        currency: e.target.value,
                      })
                    }
                    className="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-700 text-slate-200 text-sm font-mono"
                  >
                    <option value="USD">USD - US Dollar</option>
                    <option value="PKR">PKR - Pakistani Rupee</option>
                    <option value="EUR">EUR - Euro</option>
                    <option value="GBP">GBP - British Pound</option>
                    <option value="JPY">JPY - Japanese Yen</option>
                    <option value="CAD">CAD - Canadian Dollar</option>
                    <option value="SAR">SAR - Saudi Riyal</option>
                    <option value="AED">AED - UAE Dirham</option>
                    <option value="BDT">BDT - Bangladeshi Taka</option>
                    <option value="CNY">CNY - Chinese Yuan</option>
                    <option value="HKD">HKD - Hong Kong Dollar</option>
                  </select>
                </div>

                <div>
                  <label className="block text-xs font-semibold text-slate-300 mb-1">
                    Face Value (Mio in Deal Currency)
                  </label>
                  <input
                    type="number"
                    step="0.01"
                    required
                    placeholder="e.g. 10.00"
                    value={editingSecurity.faceValue ?? ''}
                    onChange={(e) => setEditingSecurity({ ...editingSecurity, faceValue: Number(e.target.value) })}
                    className="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-700 font-mono text-slate-100 text-sm"
                  />
                </div>

                <div>
                  <label className="block text-xs font-semibold text-slate-300 mb-1">
                    Amount Invested / Book Value (USD Mio)
                  </label>
                  <input
                    type="number"
                    step="0.01"
                    required
                    placeholder="e.g. 10.17"
                    value={editingSecurity.amountInvested ?? ''}
                    onChange={(e) =>
                      setEditingSecurity({ ...editingSecurity, amountInvested: Number(e.target.value) })
                    }
                    className="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-700 font-mono text-emerald-400 text-sm"
                  />
                </div>

                <div>
                  <label className="block text-xs font-semibold text-slate-300 mb-1">
                    Coupon Rate (%)
                  </label>
                  <input
                    type="number"
                    step="0.01"
                    placeholder="e.g. 7.38"
                    value={editingSecurity.couponRate ?? ''}
                    onChange={(e) => setEditingSecurity({ ...editingSecurity, couponRate: Number(e.target.value) })}
                    className="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-700 font-mono text-slate-200 text-sm"
                  />
                </div>

                <div>
                  <label className="block text-xs font-semibold text-slate-300 mb-1">
                    Original Price (% of Par)
                  </label>
                  <input
                    type="number"
                    step="0.001"
                    placeholder="e.g. 101.700"
                    value={editingSecurity.originalPrice ?? ''}
                    onChange={(e) =>
                      setEditingSecurity({ ...editingSecurity, originalPrice: Number(e.target.value) })
                    }
                    className="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-700 font-mono text-slate-200 text-sm"
                  />
                </div>

                <div>
                  <label className="block text-xs font-semibold text-slate-300 mb-1">
                    Purchase / Issue Date
                  </label>
                  <input
                    type="text"
                    placeholder="e.g. 13-Jul-21"
                    value={editingSecurity.purchaseDate || ''}
                    onChange={(e) => setEditingSecurity({ ...editingSecurity, purchaseDate: e.target.value })}
                    className="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-700 text-slate-200 text-sm"
                  />
                </div>

                <div>
                  <label className="block text-xs font-semibold text-slate-300 mb-1">
                    Maturity Date
                  </label>
                  <input
                    type="text"
                    placeholder="e.g. 08-Apr-31"
                    value={editingSecurity.maturityDate || ''}
                    onChange={(e) => setEditingSecurity({ ...editingSecurity, maturityDate: e.target.value })}
                    className="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-700 text-slate-200 text-sm"
                  />
                </div>
              </div>

              {isHO && (
                <div className="p-4 rounded-xl bg-slate-950 border border-slate-800 space-y-3 mt-2">
                  <div className="text-xs font-semibold text-cyan-400">Head Office Valuation (MTM)</div>
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="block text-[11px] text-slate-400 mb-1">MTM Price (%)</label>
                      <input
                        type="number"
                        step="0.001"
                        placeholder="e.g. 100.380"
                        value={editingSecurity.mtmPrice ?? ''}
                        onChange={(e) =>
                          setEditingSecurity({ ...editingSecurity, mtmPrice: Number(e.target.value) })
                        }
                        className="w-full px-3 py-1.5 rounded-lg bg-slate-900 border border-slate-700 font-mono text-cyan-300 text-xs"
                      />
                    </div>
                    <div>
                      <label className="block text-[11px] text-slate-400 mb-1">MTM Yield (%)</label>
                      <input
                        type="number"
                        step="0.01"
                        placeholder="e.g. 7.28"
                        value={editingSecurity.mtmYield ?? ''}
                        onChange={(e) =>
                          setEditingSecurity({ ...editingSecurity, mtmYield: Number(e.target.value) })
                        }
                        className="w-full px-3 py-1.5 rounded-lg bg-slate-900 border border-slate-700 font-mono text-purple-300 text-xs"
                      />
                    </div>
                  </div>
                </div>
              )}

              <div className="flex items-center justify-end gap-3 pt-4 border-t border-slate-800">
                <button
                  type="button"
                  onClick={() => setIsModalOpen(false)}
                  className="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 text-sm"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="px-5 py-2 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-white font-semibold text-sm shadow-lg shadow-cyan-500/20"
                >
                  Save Security
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};