'use client'

import { useEffect, useState } from 'react'
import { fetchPerformanceDashboard } from '@/lib/performance/api'
import type { AppUser, PerformanceDashboardResponse, PointsActionType } from '@/lib/types'

interface PerformanceViewProps {
  currentUser: AppUser
  refreshToken: number
}

const ACTION_LABELS: Record<PointsActionType, string> = {
  lead_saved: 'Lead Saved',
  lead_contacted: 'Lead Contacted',
  discussion_started: 'Discussion Started',
  mou_signed: 'MOU Signed',
  contract_received: 'Contract Received',
  partner_converted: 'Partner Converted',
  referral_business_generated: 'Referral Business',
}

export default function PerformanceView({ currentUser, refreshToken }: PerformanceViewProps) {
  const [dashboard, setDashboard] = useState<PerformanceDashboardResponse | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')

  useEffect(() => {
    setLoading(true)
    setError('')

    void fetchPerformanceDashboard()
      .then(setDashboard)
      .catch(err => setError(err instanceof Error ? err.message : 'Unable to load performance data'))
      .finally(() => setLoading(false))
  }, [refreshToken])

  if (loading) {
    return (
      <div className="flex-1 flex items-center justify-center">
        <span className="material-symbols-outlined animate-spin text-[#fb7185] text-3xl">refresh</span>
      </div>
    )
  }

  if (error || !dashboard) {
    return (
      <div className="flex-1 flex items-center justify-center p-8">
        <div className="rounded-2xl border border-red-500/20 bg-red-500/10 p-6 text-center">
          <p className="text-sm text-red-300">{error || 'Performance data is unavailable right now.'}</p>
        </div>
      </div>
    )
  }

  const summary = dashboard.management_summary ?? {
    total_points: dashboard.current_user_summary.total_points,
    month_points: dashboard.current_user_summary.month_points,
    total_deals: dashboard.current_user_summary.total_deals,
    active_deals: dashboard.current_user_summary.active_deals,
    contract_value: dashboard.current_user_summary.contract_value,
    referral_value: dashboard.current_user_summary.referral_value,
    converted_leads: dashboard.current_user_summary.converted_leads,
    outreach_count: 0,
  }
  const partnerSections = [
    {
      label: 'Top 10',
      entries: dashboard.partner_performance.top_10,
      clients: (entry: typeof dashboard.partner_performance.top_10[number]) => entry.total_clients,
      contracts: (entry: typeof dashboard.partner_performance.top_10[number]) => entry.total_contracts,
      value: (entry: typeof dashboard.partner_performance.top_10[number]) => entry.total_refill_value,
      refills: (entry: typeof dashboard.partner_performance.top_10[number]) => entry.total_refills,
    },
    {
      label: 'Monthly Ranking',
      entries: dashboard.partner_performance.monthly_ranking,
      clients: (entry: typeof dashboard.partner_performance.monthly_ranking[number]) => entry.month_clients,
      contracts: (entry: typeof dashboard.partner_performance.monthly_ranking[number]) => entry.month_contracts,
      value: (entry: typeof dashboard.partner_performance.monthly_ranking[number]) => entry.month_refill_value,
      refills: (entry: typeof dashboard.partner_performance.monthly_ranking[number]) => entry.month_refills,
    },
    {
      label: 'Yearly Ranking',
      entries: dashboard.partner_performance.yearly_ranking,
      clients: (entry: typeof dashboard.partner_performance.yearly_ranking[number]) => entry.year_clients,
      contracts: (entry: typeof dashboard.partner_performance.yearly_ranking[number]) => entry.year_contracts,
      value: (entry: typeof dashboard.partner_performance.yearly_ranking[number]) => entry.year_refill_value,
      refills: (entry: typeof dashboard.partner_performance.yearly_ranking[number]) => entry.year_refills,
    },
  ]

  return (
    <div className="flex-1 overflow-auto px-6 py-6">
      <div className="grid grid-cols-4 gap-3 mb-6">
        {[
          ['Total Points', String(summary.total_points)],
          [`${dashboard.current_period_label} Points`, String(summary.month_points)],
          ['Deals', String(summary.total_deals)],
          ['Contract Value', `${Math.round(summary.contract_value).toLocaleString()} EGP`],
        ].map(([label, value]) => (
          <div key={label} className="rounded-xl border border-[#574143]/10 bg-[#060e20] p-4">
            <p className="mb-1 text-[10px] font-black uppercase tracking-widest text-slate-500">{label}</p>
            <p className="text-2xl font-black text-slate-100">{value}</p>
          </div>
        ))}
      </div>

      <div className="grid grid-cols-[1.2fr,0.8fr] gap-6">
        <div className="space-y-6">
          <div className="rounded-xl border border-[#574143]/10 bg-[#060e20] overflow-hidden">
            <div className="border-b border-[#574143]/10 px-4 py-3">
              <p className="text-[10px] font-black uppercase tracking-widest text-slate-500">Leaderboard</p>
              <p className="text-sm text-slate-400">{dashboard.scope_label}</p>
            </div>
            <div className="grid grid-cols-2 divide-x divide-[#574143]/10">
              {[
                { label: 'All-Time Top 10', entries: dashboard.leaderboard_all_time },
                { label: `${dashboard.current_period_label} Top 10`, entries: dashboard.leaderboard_month },
              ].map(section => (
                <div key={section.label} className="p-4">
                  <p className="mb-3 text-[11px] font-black uppercase tracking-widest text-slate-500">{section.label}</p>
                  <div className="space-y-2">
                    {section.entries.length === 0 && (
                      <div className="rounded-xl bg-[#131b2e] p-4 text-sm text-slate-500">No points recorded yet.</div>
                    )}
                    {section.entries.map(entry => (
                      <div key={`${section.label}-${entry.user_id}`} className="rounded-xl bg-[#131b2e] p-3 border border-[#574143]/10">
                        <div className="flex items-center justify-between gap-3">
                          <div>
                            <p className="text-sm font-bold text-slate-100">
                              #{entry.rank} {entry.display_name}
                              {entry.user_id === currentUser.id ? ' (You)' : ''}
                            </p>
                            <p className="text-[11px] text-slate-500">{entry.role}</p>
                          </div>
                          <div className="text-right">
                            <p className="text-lg font-black text-[#ffb2b9]">{entry.points}</p>
                            <p className="text-[11px] text-slate-500">{Math.round(entry.contract_value).toLocaleString()} EGP</p>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {dashboard.management_summary && (
            <div className="rounded-xl border border-[#574143]/10 bg-[#060e20] overflow-hidden">
              <div className="border-b border-[#574143]/10 px-4 py-3">
                <p className="text-[10px] font-black uppercase tracking-widest text-slate-500">Management View</p>
                <p className="text-sm text-slate-400">Per-user contribution across points, conversions, and contracts.</p>
              </div>
              <div className="overflow-auto">
                <table className="w-full text-left">
                  <thead className="bg-[#131b2e]">
                    <tr>
                      {['User', 'Total', 'Month', 'Deals', 'Converted', 'Contract Value'].map(label => (
                        <th key={label} className="px-4 py-3 text-[10px] font-black uppercase tracking-widest text-slate-500">
                          {label}
                        </th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {dashboard.team_summaries.map(user => (
                      <tr key={user.user_id} className="border-b border-[#574143]/5">
                        <td className="px-4 py-3">
                          <div className="flex flex-col">
                            <span className="text-sm font-bold text-slate-100">{user.display_name}</span>
                            <span className="text-[11px] text-slate-500">{user.role}</span>
                          </div>
                        </td>
                        <td className="px-4 py-3 text-sm font-bold text-[#ffb2b9]">{user.total_points}</td>
                        <td className="px-4 py-3 text-sm text-slate-200">{user.month_points}</td>
                        <td className="px-4 py-3 text-sm text-slate-200">{user.total_deals}</td>
                        <td className="px-4 py-3 text-sm text-slate-200">{user.converted_leads}</td>
                        <td className="px-4 py-3 text-sm text-slate-200">{Math.round(user.contract_value).toLocaleString()} EGP</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          <div className="rounded-xl border border-[#574143]/10 bg-[#060e20] overflow-hidden">
            <div className="border-b border-[#574143]/10 px-4 py-3">
              <p className="text-[10px] font-black uppercase tracking-widest text-slate-500">Partner Performance</p>
              <p className="text-sm text-slate-400">Client-source, office, and partner rankings for contracts and renewals.</p>
            </div>

            <div className="p-4">
              <div className="grid grid-cols-3 gap-3 mb-4">
                {dashboard.partner_performance.top_3.length === 0 && (
                  <div className="col-span-3 rounded-xl bg-[#131b2e] p-4 text-sm text-slate-500">No partner activity has been attributed yet.</div>
                )}
                {dashboard.partner_performance.top_3.map(entry => (
                  <div key={entry.partner_id} className="rounded-xl border border-[#574143]/10 bg-[#131b2e] p-4">
                    <p className="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-1">#{entry.rank}</p>
                    <p className="text-sm font-bold text-slate-100">{entry.partner_name}</p>
                    <p className="text-[11px] text-slate-500 capitalize">{entry.kind.replace('_', ' ')}</p>
                    <p className="mt-3 text-lg font-black text-[#ffb2b9]">{Math.round(entry.total_refill_value).toLocaleString()} EGP</p>
                    <p className="text-[11px] text-slate-500">{entry.total_contracts} contracts · {entry.total_refills} renewals</p>
                  </div>
                ))}
              </div>

              <div className="grid grid-cols-3 gap-4">
                {partnerSections.map(section => (
                  <div key={section.label} className="space-y-2">
                    <p className="text-[11px] font-black uppercase tracking-widest text-slate-500">{section.label}</p>
                    {section.entries.length === 0 && (
                      <div className="rounded-xl bg-[#131b2e] p-3 text-sm text-slate-500">No rankings yet.</div>
                    )}
                    {section.entries.map(entry => (
                      <div key={`${section.label}-${entry.partner_id}`} className="rounded-xl bg-[#131b2e] p-3 border border-[#574143]/10">
                        <div className="flex items-center justify-between gap-3">
                          <div>
                            <p className="text-sm font-bold text-slate-100">#{entry.rank} {entry.partner_name}</p>
                            <p className="text-[11px] text-slate-500">
                              {section.clients(entry)} clients · {section.contracts(entry)} contracts
                            </p>
                          </div>
                          <div className="text-right">
                            <p className="text-sm font-black text-[#ffb2b9]">{Math.round(section.value(entry)).toLocaleString()}</p>
                            <p className="text-[11px] text-slate-500">{section.refills(entry)} renewals</p>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div className="space-y-6">
          <div className="rounded-xl border border-[#574143]/10 bg-[#060e20] p-5">
            <p className="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-3">Your Performance</p>
            <div className="grid grid-cols-2 gap-3 mb-4">
              {[
                ['All-Time Points', String(dashboard.current_user_summary.total_points)],
                ['Month Points', String(dashboard.current_user_summary.month_points)],
                ['Converted Leads', String(dashboard.current_user_summary.converted_leads)],
                ['Deals', String(dashboard.current_user_summary.total_deals)],
              ].map(([label, value]) => (
                <div key={label} className="rounded-xl bg-[#131b2e] p-3">
                  <p className="text-[9px] font-black uppercase tracking-widest text-slate-500 mb-1">{label}</p>
                  <p className="text-lg font-black text-slate-100">{value}</p>
                </div>
              ))}
            </div>
            <div className="rounded-xl bg-[#131b2e] p-3">
              <p className="text-[9px] font-black uppercase tracking-widest text-slate-500 mb-1">Contract Contribution</p>
              <p className="text-lg font-black text-slate-100">{Math.round(dashboard.current_user_summary.contract_value).toLocaleString()} EGP</p>
              <p className="text-[11px] text-slate-500 mt-1">Referral value: {Math.round(dashboard.current_user_summary.referral_value).toLocaleString()} EGP</p>
            </div>
          </div>

          <div className="rounded-xl border border-[#574143]/10 bg-[#060e20] p-5">
            <p className="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-3">Action Breakdown</p>
            <div className="space-y-2">
              {Object.entries(dashboard.current_user_summary.action_breakdown).map(([action, value]) => (
                <div key={action} className="rounded-xl bg-[#131b2e] p-3 border border-[#574143]/10">
                  <div className="flex items-center justify-between gap-3">
                    <div>
                      <p className="text-sm font-bold text-slate-100">{ACTION_LABELS[action as PointsActionType]}</p>
                      <p className="text-[11px] text-slate-500">{value.count} credited events</p>
                    </div>
                    <span className="text-sm font-black text-[#ffb2b9]">{value.points} pts</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {dashboard.management_summary && (
            <div className="rounded-xl border border-[#574143]/10 bg-[#060e20] p-5">
              <p className="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-3">Management Snapshot</p>
              <div className="space-y-2 text-sm">
                <div className="flex items-center justify-between rounded-xl bg-[#131b2e] p-3">
                  <span className="text-slate-500">Active Deals</span>
                  <span className="font-bold text-slate-100">{dashboard.management_summary.active_deals}</span>
                </div>
                <div className="flex items-center justify-between rounded-xl bg-[#131b2e] p-3">
                  <span className="text-slate-500">Converted Leads</span>
                  <span className="font-bold text-slate-100">{dashboard.management_summary.converted_leads}</span>
                </div>
                <div className="flex items-center justify-between rounded-xl bg-[#131b2e] p-3">
                  <span className="text-slate-500">Tracked Outreach</span>
                  <span className="font-bold text-slate-100">{dashboard.management_summary.outreach_count}</span>
                </div>
                <div className="flex items-center justify-between rounded-xl bg-[#131b2e] p-3">
                  <span className="text-slate-500">Referral Value</span>
                  <span className="font-bold text-slate-100">{Math.round(dashboard.management_summary.referral_value).toLocaleString()} EGP</span>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}