'use client'

import { useEffect, useMemo, useState } from 'react'
import { createDeal, createLeadEvent, updateDeal, updateLeadAssignment, updateLeadDetails, updateLeadStage } from '@/lib/leads/api'
import { createPartner, fetchPartners } from '@/lib/partners/api'
import { generateOutreach } from '@/lib/outreach/generate'
import { hasGlobalLeadScope } from '@/lib/auth/roles'
import {
  buildEmailHandoffUrls,
  getDefaultSubjectVariant,
  selectSubject,
  SUBJECT_VARIANT_LABELS,
} from '@/lib/outreach/handoff'
import type {
  AppUser,
  ContactMethod,
  DealRecord,
  DealStatus,
  LeadDetailResponse,
  LeadPipelineStatus,
  LeadVisibilityScope,
  OutreachConfig,
  OutreachSubjectVariant,
  PartnerKind,
  PartnerRecord,
  TeamUserRecord,
} from '@/lib/types'

interface LeadCRMPanelProps {
  detail: LeadDetailResponse | null
  teamUsers: TeamUserRecord[]
  currentUser: AppUser
  outreachConfig: OutreachConfig
  onClose: () => void
  onDetailUpdated: (detail: LeadDetailResponse) => void
}

const STAGE_OPTIONS: LeadPipelineStatus[] = [
  'discovered',
  'saved',
  'contacted',
  'in_discussion',
  'negotiating',
  'mou_signed',
  'converted',
  'lost',
]

const STAGE_LABELS: Record<LeadPipelineStatus, string> = {
  discovered: 'Discovered',
  saved: 'Saved',
  contacted: 'Contacted',
  in_discussion: 'In Discussion',
  negotiating: 'Negotiating',
  mou_signed: 'MOU Signed',
  converted: 'Converted',
  lost: 'Lost',
}

const STAGE_STYLES: Record<LeadPipelineStatus, string> = {
  discovered: 'bg-slate-500/10 text-slate-300 border border-slate-500/20',
  saved: 'bg-[#ffb95f]/10 text-[#ffb95f] border border-[#ffb95f]/20',
  contacted: 'bg-[#60a5fa]/10 text-[#60a5fa] border border-[#60a5fa]/20',
  in_discussion: 'bg-[#ac8aff]/10 text-[#ac8aff] border border-[#ac8aff]/20',
  negotiating: 'bg-[#f97316]/10 text-[#f97316] border border-[#f97316]/20',
  mou_signed: 'bg-[#22c55e]/10 text-[#22c55e] border border-[#22c55e]/20',
  converted: 'bg-[#14b8a6]/10 text-[#14b8a6] border border-[#14b8a6]/20',
  lost: 'bg-[#ef4444]/10 text-[#ef4444] border border-[#ef4444]/20',
}

const DISCOVERY_STYLES = {
  new: 'bg-[#22c55e]/10 text-[#22c55e] border border-[#22c55e]/20',
  existing: 'bg-[#60a5fa]/10 text-[#60a5fa] border border-[#60a5fa]/20',
  saved: 'bg-[#ffb95f]/10 text-[#ffb95f] border border-[#ffb95f]/20',
  excluded: 'bg-[#574143]/20 text-slate-400 border border-[#574143]/20',
} as const

const DEAL_STATUS_LABELS: Record<DealStatus, string> = {
  draft: 'Draft',
  contract_received: 'Contract Received',
  active: 'Active',
  lost: 'Lost',
}

const DEAL_STATUS_STYLES: Record<DealStatus, string> = {
  draft: 'bg-slate-500/10 text-slate-300 border border-slate-500/20',
  contract_received: 'bg-[#ffb95f]/10 text-[#ffb95f] border border-[#ffb95f]/20',
  active: 'bg-[#22c55e]/10 text-[#22c55e] border border-[#22c55e]/20',
  lost: 'bg-[#ef4444]/10 text-[#ef4444] border border-[#ef4444]/20',
}

const PARTNER_KIND_LABELS: Record<PartnerKind, string> = {
  partner: 'Partner',
  office: 'Office',
  client_source: 'Client Source',
}

function formatDateTime(value: string | null): string {
  if (!value) return 'Not set'

  return new Intl.DateTimeFormat('en', {
    dateStyle: 'medium',
    timeStyle: 'short',
  }).format(new Date(value))
}

function toDatetimeLocal(value: string | null): string {
  if (!value) return ''
  const date = new Date(value)
  const year = date.getFullYear()
  const month = `${date.getMonth() + 1}`.padStart(2, '0')
  const day = `${date.getDate()}`.padStart(2, '0')
  const hours = `${date.getHours()}`.padStart(2, '0')
  const minutes = `${date.getMinutes()}`.padStart(2, '0')
  return `${year}-${month}-${day}T${hours}:${minutes}`
}

function formatEventLabel(eventType: LeadDetailResponse['events'][number]['event_type']): string {
  if (eventType === 'email_sent') return 'Email Outreach'
  if (eventType === 'assignment_changed') return 'Assignment Update'
  return eventType.replace(/_/g, ' ')
}

function formatDealEventLabel(eventType: LeadDetailResponse['deal_events'][number]['event_type']): string {
  return eventType.replace(/_/g, ' ')
}

export default function LeadCRMPanel({
  detail,
  teamUsers,
  currentUser,
  outreachConfig,
  onClose,
  onDetailUpdated,
}: LeadCRMPanelProps) {
  const [selectedStage, setSelectedStage] = useState<LeadPipelineStatus>('discovered')
  const [businessName, setBusinessName] = useState('')
  const [category, setCategory] = useState('')
  const [leadPhone, setLeadPhone] = useState('')
  const [leadMobile, setLeadMobile] = useState('')
  const [leadWhatsapp, setLeadWhatsapp] = useState('')
  const [leadLandline, setLeadLandline] = useState('')
  const [leadEmail, setLeadEmail] = useState('')
  const [leadWebsite, setLeadWebsite] = useState('')
  const [leadAddress, setLeadAddress] = useState('')
  const [leadCity, setLeadCity] = useState('')
  const [leadCountry, setLeadCountry] = useState('')
  const [leadNotes, setLeadNotes] = useState('')
  const [leadSourceNotes, setLeadSourceNotes] = useState('')
  const [contactPersonName, setContactPersonName] = useState('')
  const [contactPersonTitle, setContactPersonTitle] = useState('')
  const [contactPersonPhone, setContactPersonPhone] = useState('')
  const [contactPersonEmail, setContactPersonEmail] = useState('')
  const [contactPersonWhatsapp, setContactPersonWhatsapp] = useState('')
  const [contactPersonNotes, setContactPersonNotes] = useState('')
  const [leadScore, setLeadScore] = useState('0')
  const [leadPartnerId, setLeadPartnerId] = useState('none')
  const [partners, setPartners] = useState<PartnerRecord[]>([])
  const [partnerName, setPartnerName] = useState('')
  const [partnerKind, setPartnerKind] = useState<PartnerKind>('partner')
  const [stageNote, setStageNote] = useState('')
  const [noteText, setNoteText] = useState('')
  const [contactNote, setContactNote] = useState('')
  const [followUpAt, setFollowUpAt] = useState('')
  const [followUpNote, setFollowUpNote] = useState('')
  const [selectedDealId, setSelectedDealId] = useState<string | null>(null)
  const [dealTitle, setDealTitle] = useState('')
  const [dealRef, setDealRef] = useState('')
  const [dealStatus, setDealStatus] = useState<DealStatus>('draft')
  const [dealNotes, setDealNotes] = useState('')
  const [dealValue, setDealValue] = useState('0')
  const [dealCurrency, setDealCurrency] = useState('EGP')
  const [referralCount, setReferralCount] = useState('0')
  const [referralValue, setReferralValue] = useState('0')
  const [renewalCount, setRenewalCount] = useState('0')
  const [renewalValue, setRenewalValue] = useState('0')
  const [dealPartnerId, setDealPartnerId] = useState('lead')
  const [assignedUserId, setAssignedUserId] = useState('unassigned')
  const [visibilityScope, setVisibilityScope] = useState<LeadVisibilityScope>('shared')
  const [selectedSubjectVariant, setSelectedSubjectVariant] = useState<OutreachSubjectVariant>(getDefaultSubjectVariant(outreachConfig.email_tone))
  const [error, setError] = useState('')
  const [savingAction, setSavingAction] = useState<string | null>(null)

  useEffect(() => {
    void fetchPartners()
      .then(setPartners)
      .catch(() => {})
  }, [])

  useEffect(() => {
    if (!detail) {
      setSelectedStage('discovered')
      setBusinessName('')
      setCategory('')
      setLeadPhone('')
      setLeadMobile('')
      setLeadWhatsapp('')
      setLeadLandline('')
      setLeadEmail('')
      setLeadWebsite('')
      setLeadAddress('')
      setLeadCity('')
      setLeadCountry('')
      setLeadNotes('')
      setLeadSourceNotes('')
      setContactPersonName('')
      setContactPersonTitle('')
      setContactPersonPhone('')
      setContactPersonEmail('')
      setContactPersonWhatsapp('')
      setContactPersonNotes('')
      setLeadScore('0')
      setLeadPartnerId('none')
      setStageNote('')
      setNoteText('')
      setContactNote('')
      setFollowUpAt('')
      setFollowUpNote('')
      setSelectedDealId(null)
      setDealTitle('')
      setDealRef('')
      setDealStatus('draft')
      setDealNotes('')
      setDealValue('0')
      setDealCurrency('EGP')
      setReferralCount('0')
      setReferralValue('0')
      setRenewalCount('0')
      setRenewalValue('0')
      setDealPartnerId('lead')
      setAssignedUserId('unassigned')
      setVisibilityScope('shared')
      setSelectedSubjectVariant(getDefaultSubjectVariant(outreachConfig.email_tone))
      setError('')
      return
    }

    setSelectedStage(detail.lead.status)
    setBusinessName(detail.lead.business_name)
    setCategory(detail.lead.normalized_category)
    setLeadPhone(detail.lead.phone)
    setLeadMobile(detail.lead.mobile)
    setLeadWhatsapp(detail.lead.whatsapp)
    setLeadLandline(detail.lead.landline)
    setLeadEmail(detail.lead.email)
    setLeadWebsite(detail.lead.website)
    setLeadAddress(detail.lead.address)
    setLeadCity(detail.lead.city)
    setLeadCountry(detail.lead.country)
    setLeadNotes(detail.lead.notes)
    setLeadSourceNotes(detail.lead.source_notes)
    setContactPersonName(detail.lead.contact_person_name)
    setContactPersonTitle(detail.lead.contact_person_title)
    setContactPersonPhone(detail.lead.contact_person_phone)
    setContactPersonEmail(detail.lead.contact_person_email)
    setContactPersonWhatsapp(detail.lead.contact_person_whatsapp)
    setContactPersonNotes(detail.lead.contact_person_notes)
    setLeadScore(String(detail.lead.score))
    setLeadPartnerId(detail.lead.partner_id ?? 'none')
    setFollowUpAt(toDatetimeLocal(detail.lead.next_follow_up_at))
    const primaryDeal = detail.deals[0] ?? null
    setSelectedDealId(primaryDeal?.id ?? null)
    setDealTitle(primaryDeal?.title ?? '')
    setDealRef(primaryDeal?.contract_ref ?? '')
    setDealStatus(primaryDeal?.status ?? 'draft')
    setDealNotes(primaryDeal?.notes ?? '')
    setDealValue(String(primaryDeal?.contract_value ?? 0))
    setDealCurrency(primaryDeal?.currency ?? 'EGP')
    setReferralCount(String(primaryDeal?.referral_count ?? 0))
    setReferralValue(String(primaryDeal?.referral_value ?? 0))
    setRenewalCount(String(primaryDeal?.renewal_count ?? 0))
    setRenewalValue(String(primaryDeal?.renewal_value ?? 0))
    setDealPartnerId(primaryDeal?.partner_id ?? 'lead')
    setAssignedUserId(detail.lead.assigned_to ?? 'unassigned')
    setVisibilityScope(detail.lead.visibility_scope)
    setSelectedSubjectVariant(getDefaultSubjectVariant(outreachConfig.email_tone))
    setError('')
  }, [detail, outreachConfig.email_tone])

  const canManage = useMemo(() => {
    if (!detail) return false
    return (
      hasGlobalLeadScope(currentUser) ||
      currentUser.role === 'manager' ||
      detail.lead.owner_id === currentUser.id ||
      detail.lead.assigned_to === currentUser.id
    )
  }, [currentUser.id, currentUser.role, detail])

  const canAssign = useMemo(() => {
    if (!detail) return false
    return hasGlobalLeadScope(currentUser) || currentUser.role === 'manager'
  }, [currentUser.role, detail])

  const canEditVisibility = useMemo(() => {
    if (!detail) return false
    return hasGlobalLeadScope(currentUser) || currentUser.role === 'manager' || detail.lead.owner_id === currentUser.id
  }, [currentUser.id, currentUser.role, detail])

  const outreach = useMemo(() => {
    if (!detail) return null
    return generateOutreach(detail.lead.full_data, outreachConfig)
  }, [detail, outreachConfig])

  const selectedSubject = useMemo(() => {
    if (!outreach) return ''
    return selectSubject(outreach, selectedSubjectVariant)
  }, [outreach, selectedSubjectVariant])

  const outreachEvents = useMemo(
    () => detail?.events.filter(event => event.event_type === 'email_sent') ?? [],
    [detail]
  )

  const totalContractValue = useMemo(
    () => detail?.deals.reduce((sum, deal) => sum + deal.contract_value, 0) ?? 0,
    [detail]
  )

  const activeDeals = useMemo(
    () => detail?.deals.filter(deal => deal.status === 'active').length ?? 0,
    [detail]
  )

  const accessContext = useMemo(() => {
    if (!detail) return ''

    if (currentUser.role === 'super_admin') {
      return 'Super Admin access: full visibility, reassignment control, and system-wide oversight.'
    }

    if (currentUser.role === 'admin') {
      return 'Admin access: full visibility and reassignment control.'
    }

    if (currentUser.role === 'manager') {
      return `Manager scope: all ${currentUser.team_slug} leads are visible and assignable.`
    }

    if (detail.lead.owner_id === currentUser.id) {
      return detail.lead.visibility_scope === 'private'
        ? 'You own this lead and have kept it private.'
        : 'You own this lead and it is visible to the shared team.'
    }

    if (detail.lead.assigned_to === currentUser.id) {
      return 'You are the active assignee for this lead.'
    }

    return detail.lead.visibility_scope === 'private'
      ? 'This lead is private to its owner or assignee.'
      : 'This lead is shared across the team for visibility.'
  }, [currentUser.id, currentUser.role, currentUser.team_slug, detail])

  const runAction = async (key: string, action: () => Promise<LeadDetailResponse>, onSuccess?: () => void) => {
    setSavingAction(key)
    setError('')

    try {
      const updated = await action()
      onDetailUpdated(updated)
      onSuccess?.()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Action failed')
    } finally {
      setSavingAction(null)
    }
  }

  const handleAssignmentSave = async () => {
    if (!detail) return

    await runAction('assignment', () => updateLeadAssignment(detail.lead.id, {
      assigned_to: canAssign ? (assignedUserId === 'unassigned' ? null : assignedUserId) : undefined,
      visibility_scope: visibilityScope,
      note: 'Lead assignment settings updated.',
    }))
  }

  const handleSaveLeadProfile = async () => {
    if (!detail) return

    await runAction('lead-profile', () => updateLeadDetails(detail.lead.id, {
      business_name: businessName,
      normalized_category: category,
      phone: leadPhone,
      mobile: leadMobile,
      whatsapp: leadWhatsapp,
      landline: leadLandline,
      email: leadEmail,
      website: leadWebsite,
      address: leadAddress,
      city: leadCity,
      country: leadCountry,
      notes: leadNotes,
      source_notes: leadSourceNotes,
      contact_person_name: contactPersonName,
      contact_person_title: contactPersonTitle,
      contact_person_phone: contactPersonPhone,
      contact_person_email: contactPersonEmail,
      contact_person_whatsapp: contactPersonWhatsapp,
      contact_person_notes: contactPersonNotes,
      score: Number(leadScore) || 0,
      partner_id: leadPartnerId === 'none' ? null : leadPartnerId,
    }))
  }

  const handleCreatePartner = async () => {
    if (!partnerName.trim()) {
      setError('Partner name is required.')
      return
    }

    setSavingAction('partner')
    setError('')

    try {
      const created = await createPartner({
        name: partnerName,
        kind: partnerKind,
      })

      setPartners(prev => {
        const next = [created, ...prev.filter(item => item.id !== created.id)]
        return next.sort((left, right) => left.name.localeCompare(right.name))
      })
      setLeadPartnerId(created.id)
      setPartnerName('')
      setPartnerKind('partner')
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unable to create partner')
    } finally {
      setSavingAction(null)
    }
  }

  const loadDealIntoForm = (deal: DealRecord | null) => {
    setSelectedDealId(deal?.id ?? null)
    setDealTitle(deal?.title ?? '')
    setDealRef(deal?.contract_ref ?? '')
    setDealStatus(deal?.status ?? 'draft')
    setDealNotes(deal?.notes ?? '')
    setDealValue(String(deal?.contract_value ?? 0))
    setDealCurrency(deal?.currency ?? 'EGP')
    setReferralCount(String(deal?.referral_count ?? 0))
    setReferralValue(String(deal?.referral_value ?? 0))
    setRenewalCount(String(deal?.renewal_count ?? 0))
    setRenewalValue(String(deal?.renewal_value ?? 0))
    setDealPartnerId(deal?.partner_id ?? 'lead')
  }

  const resetDealForm = () => {
    loadDealIntoForm(null)
  }

  const handleSaveDeal = async () => {
    if (!detail) return

    const payload = {
      title: dealTitle,
      contract_ref: dealRef,
      status: dealStatus,
      notes: dealNotes,
      contract_value: Number(dealValue) || 0,
      currency: dealCurrency,
      referral_count: Number(referralCount) || 0,
      referral_value: Number(referralValue) || 0,
      renewal_count: Number(renewalCount) || 0,
      renewal_value: Number(renewalValue) || 0,
      partner_id: dealPartnerId === 'lead' ? detail.lead.partner_id ?? null : dealPartnerId === 'none' ? null : dealPartnerId,
    }

    if (selectedDealId) {
      await runAction('deal', () => updateDeal(selectedDealId, payload))
      return
    }

    await runAction('deal', () => createDeal(detail.lead.id, payload), () => resetDealForm())
  }

  const handleContact = async (method: ContactMethod) => {
    if (!detail) return

    await runAction(`contact-${method}`, () => createLeadEvent(detail.lead.id, {
      event_type: 'contact_attempt',
      contact_method: method,
      note: contactNote,
    }), () => setContactNote(''))
  }

  const handleSendEmail = async () => {
    if (!detail || !outreach) return
    const recipient = detail.lead.email || detail.lead.full_data.email

    if (!recipient) {
      setError('This lead does not have an email address yet.')
      return
    }

    const { gmail, fallback } = buildEmailHandoffUrls({
      to: recipient,
      subject: selectedSubject,
      body: outreach.plain_text,
    })
    const composeWindow = window.open('', '_blank', 'noopener,noreferrer')
    if (composeWindow) {
      composeWindow.document.write('<title>Opening email…</title><p style="font-family:sans-serif;padding:24px">Opening your email compose window…</p>')
    }

    setSavingAction('email')
    setError('')

    const openComposeUrl = (url: string) => {
      if (composeWindow && !composeWindow.closed) {
        composeWindow.location.replace(url)
        return
      }

      const popup = window.open(url, '_blank', 'noopener,noreferrer')
      if (!popup) {
        window.location.href = url
      }
    }

    try {
      const updated = await createLeadEvent(detail.lead.id, {
        event_type: 'email_sent',
        note: `Gmail compose handoff opened using the ${SUBJECT_VARIANT_LABELS[selectedSubjectVariant].toLowerCase()} subject.`,
        metadata: {
          outreach_type: 'gmail_handoff',
          subject: selectedSubject,
          recipient,
          language: outreachConfig.language,
          tone: outreachConfig.email_tone,
          style: outreachConfig.email_style,
          subject_variant: selectedSubjectVariant,
          body_preview: outreach.plain_text.slice(0, 500),
        },
      })

      onDetailUpdated(updated)
    } catch (err) {
      setError(err instanceof Error ? `${err.message}. Gmail compose will still open.` : 'Tracking failed, but Gmail compose will still open.')
    } finally {
      openComposeUrl(gmail || fallback)
      setSavingAction(null)
    }
  }

  if (!detail) {
    return (
      <aside className="w-96 bg-[#171f33] border-l border-[#574143]/10 flex flex-col items-center justify-center p-8 text-center">
        <span className="material-symbols-outlined text-5xl text-slate-700 mb-4">library_books</span>
        <p className="text-sm text-slate-600 font-medium">Select any saved lead to view CRM details, stage history, and activity.</p>
      </aside>
    )
  }

  const { lead, events } = detail
  const latestOutreach = outreachEvents[0] ?? null

  return (
    <aside className="w-96 bg-[#171f33] border-l border-[#574143]/10 flex flex-col h-full overflow-hidden">
      <div className="p-5 border-b border-[#574143]/10">
        <div className="flex items-center justify-between mb-4">
          <span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">CRM Detail</span>
          <button onClick={onClose} className="text-slate-500 hover:text-white transition-colors">
            <span className="material-symbols-outlined text-lg">close</span>
          </button>
        </div>

        <div className="mb-4">
          <h3 className="text-lg font-extrabold text-[#dae2fd] leading-tight" style={{ fontFamily: 'Manrope, sans-serif' }}>
            {lead.business_name}
          </h3>
          <p className="text-sm text-[#ffb2b9] font-bold mt-1">{lead.normalized_category}</p>
        </div>

        <div className="flex flex-wrap gap-2 mb-4">
          <span className={`px-2 py-1 text-[10px] font-black rounded-full uppercase tracking-widest ${STAGE_STYLES[lead.status]}`}>
            {STAGE_LABELS[lead.status]}
          </span>
          <span className={`px-2 py-1 text-[10px] font-black rounded-full uppercase tracking-widest ${DISCOVERY_STYLES[lead.lead_status]}`}>
            {lead.lead_status}
          </span>
        </div>

        <div className="grid grid-cols-3 gap-3">
          <div className="bg-[#222a3d] p-3 rounded-xl">
            <p className="text-[9px] font-bold text-slate-500 uppercase mb-1">Owner</p>
            <p className="text-sm font-bold text-slate-100">{lead.owner_display_name}</p>
            <p className="text-[11px] text-slate-500">{lead.owner_role}</p>
          </div>
          <div className="bg-[#222a3d] p-3 rounded-xl">
            <p className="text-[9px] font-bold text-slate-500 uppercase mb-1">Assigned</p>
            <p className="text-sm font-bold text-slate-100">{lead.assigned_to_display_name ?? 'Unassigned'}</p>
            <p className="text-[11px] text-slate-500">{lead.assigned_to_role ?? lead.visibility_scope}</p>
          </div>
          <div className="bg-[#222a3d] p-3 rounded-xl">
            <p className="text-[9px] font-bold text-slate-500 uppercase mb-1">Next Follow-up</p>
            <p className="text-sm font-bold text-slate-100">{lead.next_follow_up_at ? formatDateTime(lead.next_follow_up_at) : 'None'}</p>
          </div>
        </div>
      </div>

      <div className="flex-1 overflow-y-auto p-5 space-y-5">
        {error && (
          <div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/20 rounded-xl">
            <span className="material-symbols-outlined text-red-400 text-lg">error</span>
            <span className="text-sm text-red-300">{error}</span>
          </div>
        )}

        <div className="rounded-xl border border-[#574143]/10 bg-[#131b2e] p-3">
          <p className="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-1">Access Context</p>
          <p className="text-[12px] leading-relaxed text-slate-300">{accessContext}</p>
        </div>

        <div>
          <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-3">Lead Enrichment</p>
          <div className="space-y-3">
            <div className="grid grid-cols-2 gap-2">
              <input
                type="text"
                value={businessName}
                onChange={event => setBusinessName(event.target.value)}
                placeholder="Business name"
                disabled={!canManage}
                className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
              />
              <input
                type="text"
                value={category}
                onChange={event => setCategory(event.target.value)}
                placeholder="Category"
                disabled={!canManage}
                className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
              />
            </div>

            <div className="grid grid-cols-2 gap-2">
              <input
                type="text"
                value={leadMobile}
                onChange={event => setLeadMobile(event.target.value)}
                placeholder="Mobile"
                disabled={!canManage}
                className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
              />
              <input
                type="text"
                value={leadWhatsapp}
                onChange={event => setLeadWhatsapp(event.target.value)}
                placeholder="WhatsApp"
                disabled={!canManage}
                className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
              />
            </div>

            <div className="grid grid-cols-2 gap-2">
              <input
                type="text"
                value={leadLandline}
                onChange={event => setLeadLandline(event.target.value)}
                placeholder="Landline"
                disabled={!canManage}
                className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
              />
              <input
                type="text"
                value={leadPhone}
                onChange={event => setLeadPhone(event.target.value)}
                placeholder="Primary phone"
                disabled={!canManage}
                className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
              />
            </div>

            <div className="grid grid-cols-2 gap-2">
              <input
                type="email"
                value={leadEmail}
                onChange={event => setLeadEmail(event.target.value)}
                placeholder="Email"
                disabled={!canManage}
                className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
              />
              <input
                type="text"
                value={leadWebsite}
                onChange={event => setLeadWebsite(event.target.value)}
                placeholder="Website"
                disabled={!canManage}
                className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
              />
            </div>

            <input
              type="text"
              value={leadAddress}
              onChange={event => setLeadAddress(event.target.value)}
              placeholder="Address"
              disabled={!canManage}
              className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
            />

            <div className="grid grid-cols-3 gap-2">
              <input
                type="text"
                value={leadCity}
                onChange={event => setLeadCity(event.target.value)}
                placeholder="City"
                disabled={!canManage}
                className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
              />
              <input
                type="text"
                value={leadCountry}
                onChange={event => setLeadCountry(event.target.value)}
                placeholder="Country"
                disabled={!canManage}
                className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
              />
              <input
                type="number"
                min="0"
                max="100"
                value={leadScore}
                onChange={event => setLeadScore(event.target.value)}
                placeholder="Score"
                disabled={!canManage}
                className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
              />
            </div>

            <div className="rounded-xl border border-[#574143]/10 bg-[#131b2e] p-3 space-y-3">
              <p className="text-[10px] font-black uppercase tracking-widest text-slate-500">Partner / Office Attribution</p>
              <div className="grid grid-cols-2 gap-2">
                <select
                  value={leadPartnerId}
                  onChange={event => setLeadPartnerId(event.target.value)}
                  disabled={!canManage}
                  className="w-full bg-[#0f1728] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
                >
                  <option value="none">No partner linked</option>
                  {partners.map(partner => (
                    <option key={partner.id} value={partner.id}>
                      {partner.name} · {PARTNER_KIND_LABELS[partner.kind]}
                    </option>
                  ))}
                </select>
                <select
                  value={partnerKind}
                  onChange={event => setPartnerKind(event.target.value as PartnerKind)}
                  disabled={!canManage}
                  className="w-full bg-[#0f1728] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
                >
                  {Object.entries(PARTNER_KIND_LABELS).map(([value, label]) => (
                    <option key={value} value={value}>{label}</option>
                  ))}
                </select>
              </div>
              <div className="grid grid-cols-[1fr,auto] gap-2">
                <input
                  type="text"
                  value={partnerName}
                  onChange={event => setPartnerName(event.target.value)}
                  placeholder="Quick-add partner or office"
                  disabled={!canManage}
                  className="w-full bg-[#0f1728] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
                />
                <button
                  type="button"
                  onClick={handleCreatePartner}
                  disabled={!canManage || !partnerName.trim() || savingAction === 'partner'}
                  className="px-4 rounded-xl bg-[#0f1728] text-slate-200 font-black border border-[#574143]/10 hover:border-[#ffb2b9]/30 disabled:opacity-50"
                >
                  {savingAction === 'partner' ? 'Creating…' : 'Create'}
                </button>
              </div>
              <p className="text-[11px] leading-relaxed text-slate-500">
                Link the lead to a partner, office, or client source so generated contracts and renewals roll into partner rankings.
              </p>
            </div>

            <div className="rounded-xl border border-[#574143]/10 bg-[#131b2e] p-3 space-y-3">
              <p className="text-[10px] font-black uppercase tracking-widest text-slate-500">Contact Person</p>
              <div className="grid grid-cols-2 gap-2">
                <input
                  type="text"
                  value={contactPersonName}
                  onChange={event => setContactPersonName(event.target.value)}
                  placeholder="Name"
                  disabled={!canManage}
                  className="w-full bg-[#0f1728] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
                />
                <input
                  type="text"
                  value={contactPersonTitle}
                  onChange={event => setContactPersonTitle(event.target.value)}
                  placeholder="Role / title"
                  disabled={!canManage}
                  className="w-full bg-[#0f1728] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
                />
              </div>
              <div className="grid grid-cols-3 gap-2">
                <input
                  type="text"
                  value={contactPersonPhone}
                  onChange={event => setContactPersonPhone(event.target.value)}
                  placeholder="Phone"
                  disabled={!canManage}
                  className="w-full bg-[#0f1728] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
                />
                <input
                  type="email"
                  value={contactPersonEmail}
                  onChange={event => setContactPersonEmail(event.target.value)}
                  placeholder="Email"
                  disabled={!canManage}
                  className="w-full bg-[#0f1728] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
                />
                <input
                  type="text"
                  value={contactPersonWhatsapp}
                  onChange={event => setContactPersonWhatsapp(event.target.value)}
                  placeholder="WhatsApp"
                  disabled={!canManage}
                  className="w-full bg-[#0f1728] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
                />
              </div>
              <textarea
                value={contactPersonNotes}
                onChange={event => setContactPersonNotes(event.target.value)}
                placeholder="Decision-maker context, preferred timing, or relationship notes"
                disabled={!canManage}
                className="w-full min-h-[72px] bg-[#0f1728] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50 resize-none"
              />
            </div>

            <textarea
              value={leadNotes}
              onChange={event => setLeadNotes(event.target.value)}
              placeholder="Internal notes for the lead"
              disabled={!canManage}
              className="w-full min-h-[72px] bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50 resize-none"
            />
            <textarea
              value={leadSourceNotes}
              onChange={event => setLeadSourceNotes(event.target.value)}
              placeholder="Source notes and acquisition context"
              disabled={!canManage}
              className="w-full min-h-[72px] bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50 resize-none"
            />
            <div className="rounded-xl bg-[#131b2e] p-3 text-[12px] text-slate-300">
              {lead.last_contact_at ? `${formatDateTime(lead.last_contact_at)} via ${lead.last_contact_method}` : 'No contact logged yet.'}
            </div>
            <button
              type="button"
              onClick={handleSaveLeadProfile}
              disabled={!canManage || savingAction === 'lead-profile'}
              className="w-full py-3 rounded-xl bg-gradient-to-br from-[#ffb2b9] to-[#fb7185] text-[#6f0122] font-black disabled:opacity-50"
            >
              {savingAction === 'lead-profile' ? 'Saving Lead…' : 'Save Lead Details'}
            </button>
          </div>
        </div>

        <div>
          <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-3">Assignment</p>
          <div className="space-y-3">
            <select
              value={assignedUserId}
              onChange={event => setAssignedUserId(event.target.value)}
              disabled={!canAssign}
              className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
            >
              <option value="unassigned">Unassigned</option>
              {teamUsers.map(teamUser => (
                <option key={teamUser.id} value={teamUser.id}>
                  {teamUser.display_name} · {teamUser.role}
                </option>
              ))}
            </select>

            <div className="grid grid-cols-2 gap-2">
              {(['shared', 'private'] as LeadVisibilityScope[]).map(scope => (
                <button
                  key={scope}
                  type="button"
                  onClick={() => setVisibilityScope(scope)}
                  disabled={!canEditVisibility}
                  className={`rounded-xl border px-3 py-2 text-sm font-bold transition-all disabled:opacity-50 ${
                    visibilityScope === scope
                      ? 'border-[#ffb2b9]/30 bg-[#ffb2b9]/10 text-[#dae2fd]'
                      : 'border-[#574143]/10 bg-[#131b2e] text-slate-400'
                  }`}
                >
                  {scope === 'shared' ? 'Shared' : 'Private'}
                </button>
              ))}
            </div>

            <p className="text-[11px] leading-relaxed text-slate-500">
              Shared leads stay visible to the team. Private leads stay limited to the owner, current assignee, and management.
            </p>

            <button
              type="button"
              onClick={handleAssignmentSave}
              disabled={(!canAssign && !canEditVisibility) || savingAction === 'assignment'}
              className="w-full py-3 rounded-xl bg-[#131b2e] text-slate-200 font-black border border-[#574143]/10 hover:border-[#ffb2b9]/30 disabled:opacity-50"
            >
              {savingAction === 'assignment' ? 'Saving Assignment…' : 'Save Assignment Settings'}
            </button>
          </div>
        </div>

        <div>
          <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-3">Outreach History</p>
          <div className="grid grid-cols-3 gap-2">
            <div className="bg-[#131b2e] rounded-xl p-3">
              <p className="text-[9px] font-bold text-slate-500 uppercase mb-1">Emails</p>
              <p className="text-lg font-black text-slate-100">{outreachEvents.length}</p>
            </div>
            <div className="bg-[#131b2e] rounded-xl p-3">
              <p className="text-[9px] font-bold text-slate-500 uppercase mb-1">Last Sent</p>
              <p className="text-[12px] font-bold text-slate-200">{latestOutreach ? formatDateTime(latestOutreach.created_at) : 'Never'}</p>
            </div>
            <div className="bg-[#131b2e] rounded-xl p-3">
              <p className="text-[9px] font-bold text-slate-500 uppercase mb-1">Type</p>
              <p className="text-[12px] font-bold text-slate-200">{latestOutreach?.metadata?.outreach_type ?? 'None'}</p>
            </div>
          </div>
          {latestOutreach?.metadata?.subject && (
            <div className="mt-3 bg-[#131b2e] rounded-xl p-3 border border-[#574143]/10">
              <p className="text-[9px] font-bold text-slate-500 uppercase mb-1">Last Subject</p>
              <p className="text-sm text-slate-200 leading-relaxed">{latestOutreach.metadata.subject}</p>
            </div>
          )}
        </div>

        <div>
          <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-3">Send Email</p>
          <div className="space-y-3">
            <div className="flex flex-wrap gap-2">
              {outreach && (Object.entries(outreach.subjects) as [OutreachSubjectVariant, string][]).map(([variant, subject]) => (
                <button
                  key={variant}
                  type="button"
                  onClick={() => setSelectedSubjectVariant(variant)}
                  className={`px-3 py-2 rounded-xl text-left border transition-all ${
                    selectedSubjectVariant === variant
                      ? 'bg-[#ffb2b9]/10 border-[#ffb2b9]/30 text-[#dae2fd]'
                      : 'bg-[#131b2e] border-[#574143]/10 text-slate-400 hover:text-white'
                  }`}
                >
                  <p className="text-[10px] font-black uppercase tracking-widest">{SUBJECT_VARIANT_LABELS[variant]}</p>
                  <p className="text-[11px] leading-relaxed mt-1 max-w-[96px] line-clamp-3">{subject}</p>
                </button>
              ))}
            </div>
            <div className="bg-[#131b2e] rounded-xl p-3 border border-[#574143]/10">
              <p className="text-[9px] font-bold text-slate-500 uppercase mb-1">Selected Subject</p>
              <p className="text-sm text-slate-200 leading-relaxed">{selectedSubject || 'No subject selected'}</p>
              {outreach && (
                <div className="flex flex-wrap gap-2 mt-3">
                  <span className="px-2 py-1 rounded-full bg-[#222a3d] text-[10px] font-black uppercase tracking-widest text-[#ffb2b9]">{outreachConfig.language}</span>
                  <span className="px-2 py-1 rounded-full bg-[#222a3d] text-[10px] font-black uppercase tracking-widest text-slate-300">{outreachConfig.email_tone}</span>
                  <span className="px-2 py-1 rounded-full bg-[#222a3d] text-[10px] font-black uppercase tracking-widest text-[#9fe8c4]">{outreachConfig.email_style}</span>
                </div>
              )}
            </div>
            <button
              onClick={handleSendEmail}
              disabled={!canManage || !(lead.email || lead.full_data.email) || savingAction === 'email'}
              className="w-full py-3 bg-gradient-to-br from-[#ffb2b9] to-[#fb7185] text-[#6f0122] font-black rounded-xl disabled:opacity-50"
            >
              {savingAction === 'email' ? 'Opening Gmail…' : 'Send Email via Gmail'}
            </button>
            <p className="text-[11px] text-slate-500 leading-relaxed">
              Gmail handoff opens a pre-filled compose window, logs the outreach event, and updates contact history on this lead.
            </p>
          </div>
        </div>

        <div>
          <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-3">Lifecycle</p>
          <div className="space-y-3">
            <select
              value={selectedStage}
              onChange={event => setSelectedStage(event.target.value as LeadPipelineStatus)}
              disabled={!canManage}
              className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
            >
              {STAGE_OPTIONS.map(stage => (
                <option key={stage} value={stage}>{STAGE_LABELS[stage]}</option>
              ))}
            </select>
            <textarea
              value={stageNote}
              onChange={event => setStageNote(event.target.value)}
              placeholder="Optional note for this stage change"
              disabled={!canManage}
              className="w-full min-h-[88px] bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50 resize-none"
            />
            <button
              onClick={() => runAction('stage', () => updateLeadStage(lead.id, selectedStage, stageNote), () => setStageNote(''))}
              disabled={!canManage || savingAction === 'stage'}
              className="w-full py-3 bg-gradient-to-br from-[#ffb2b9] to-[#fb7185] text-[#6f0122] font-black rounded-xl disabled:opacity-50"
            >
              {savingAction === 'stage' ? 'Updating Stage…' : 'Update Lifecycle Stage'}
            </button>
          </div>
        </div>

        <div>
          <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-3">Deals & Contracts</p>
          <div className="grid grid-cols-2 gap-2 mb-3">
            <div className="bg-[#131b2e] rounded-xl p-3">
              <p className="text-[9px] font-bold text-slate-500 uppercase mb-1">Deals</p>
              <p className="text-lg font-black text-slate-100">{detail.deals.length}</p>
            </div>
            <div className="bg-[#131b2e] rounded-xl p-3">
              <p className="text-[9px] font-bold text-slate-500 uppercase mb-1">Active</p>
              <p className="text-lg font-black text-slate-100">{activeDeals}</p>
            </div>
            <div className="bg-[#131b2e] rounded-xl p-3 col-span-2">
              <p className="text-[9px] font-bold text-slate-500 uppercase mb-1">Total Contract Value</p>
              <p className="text-lg font-black text-slate-100">{Math.round(totalContractValue).toLocaleString()} EGP</p>
            </div>
          </div>

          <div className="space-y-2 mb-3">
            {detail.deals.length === 0 && (
              <div className="bg-[#131b2e] rounded-xl p-4 text-sm text-slate-500">
                No deals have been recorded for this lead yet.
              </div>
            )}

            {detail.deals.map(deal => (
              <button
                key={deal.id}
                type="button"
                onClick={() => loadDealIntoForm(deal)}
                className={`w-full rounded-xl border p-3 text-left transition-all ${
                  selectedDealId === deal.id
                    ? 'border-[#ffb2b9]/30 bg-[#ffb2b9]/10'
                    : 'border-[#574143]/10 bg-[#131b2e]'
                }`}
              >
                <div className="flex items-start justify-between gap-3 mb-2">
                  <div>
                    <p className="text-sm font-bold text-slate-100">{deal.title}</p>
                    <p className="text-[11px] text-slate-500">
                      {deal.created_by_display_name} · {formatDateTime(deal.created_at)}
                    </p>
                  </div>
                  <span className={`px-2 py-1 text-[10px] font-black rounded-full uppercase tracking-widest ${DEAL_STATUS_STYLES[deal.status]}`}>
                    {DEAL_STATUS_LABELS[deal.status]}
                  </span>
                </div>
                <p className="text-[12px] text-slate-300">
                  {Math.round(deal.contract_value).toLocaleString()} {deal.currency}
                  {deal.contract_ref ? ` · ${deal.contract_ref}` : ''}
                </p>
                <p className="text-[11px] text-slate-500 mt-1">
                  Referrals: {deal.referral_count} · Value {Math.round(deal.referral_value).toLocaleString()} {deal.currency}
                </p>
              </button>
            ))}
          </div>

          <div className="space-y-3">
            <input
              type="text"
              value={dealTitle}
              onChange={event => setDealTitle(event.target.value)}
              placeholder="Deal title / contract label"
              disabled={!canManage}
              className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
            />
            <div className="grid grid-cols-2 gap-2">
              <input
                type="text"
                value={dealRef}
                onChange={event => setDealRef(event.target.value)}
                placeholder="Contract ref"
                disabled={!canManage}
                className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
              />
              <select
                value={dealStatus}
                onChange={event => setDealStatus(event.target.value as DealStatus)}
                disabled={!canManage}
                className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
              >
                {Object.entries(DEAL_STATUS_LABELS).map(([value, label]) => (
                  <option key={value} value={value}>{label}</option>
                ))}
              </select>
            </div>
            <div className="grid grid-cols-2 gap-2">
              <input
                type="number"
                min="0"
                value={dealValue}
                onChange={event => setDealValue(event.target.value)}
                placeholder="Contract value"
                disabled={!canManage}
                className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
              />
              <input
                type="text"
                value={dealCurrency}
                onChange={event => setDealCurrency(event.target.value.toUpperCase())}
                placeholder="Currency"
                disabled={!canManage}
                className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
              />
            </div>
            <div className="grid grid-cols-2 gap-2">
              <input
                type="number"
                min="0"
                value={referralCount}
                onChange={event => setReferralCount(event.target.value)}
                placeholder="Referral count"
                disabled={!canManage}
                className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
              />
              <input
                type="number"
                min="0"
                value={referralValue}
                onChange={event => setReferralValue(event.target.value)}
                placeholder="Referral value"
                disabled={!canManage}
                className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
              />
            </div>
            <div className="grid grid-cols-2 gap-2">
              <input
                type="number"
                min="0"
                value={renewalCount}
                onChange={event => setRenewalCount(event.target.value)}
                placeholder="Renewal / refill count"
                disabled={!canManage}
                className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
              />
              <input
                type="number"
                min="0"
                value={renewalValue}
                onChange={event => setRenewalValue(event.target.value)}
                placeholder="Renewal / refill value"
                disabled={!canManage}
                className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
              />
            </div>
            <select
              value={dealPartnerId}
              onChange={event => setDealPartnerId(event.target.value)}
              disabled={!canManage}
              className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
            >
              <option value="lead">Use lead partner ({lead.partner_name ?? 'none'})</option>
              <option value="none">No partner attribution</option>
              {partners.map(partner => (
                <option key={partner.id} value={partner.id}>
                  {partner.name} · {PARTNER_KIND_LABELS[partner.kind]}
                </option>
              ))}
            </select>
            <textarea
              value={dealNotes}
              onChange={event => setDealNotes(event.target.value)}
              placeholder="Commercial notes, agreement context, or contract details"
              disabled={!canManage}
              className="w-full min-h-[72px] bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50 resize-none"
            />
            <div className="grid grid-cols-2 gap-2">
              <button
                type="button"
                onClick={handleSaveDeal}
                disabled={!canManage || !dealTitle.trim() || savingAction === 'deal'}
                className="w-full py-3 rounded-xl bg-gradient-to-br from-[#ffb2b9] to-[#fb7185] text-[#6f0122] font-black disabled:opacity-50"
              >
                {savingAction === 'deal' ? 'Saving Deal…' : selectedDealId ? 'Update Deal' : 'Create Deal'}
              </button>
              <button
                type="button"
                onClick={resetDealForm}
                disabled={!canManage}
                className="w-full py-3 rounded-xl bg-[#131b2e] text-slate-200 font-black border border-[#574143]/10 hover:border-[#ffb2b9]/30 disabled:opacity-50"
              >
                New Deal
              </button>
            </div>
          </div>
        </div>

        <div>
          <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-3">Log Contact</p>
          <textarea
            value={contactNote}
            onChange={event => setContactNote(event.target.value)}
            placeholder="What happened in the contact attempt?"
            disabled={!canManage}
            className="w-full min-h-[88px] bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50 resize-none mb-3"
          />
          <div className="grid grid-cols-2 gap-2">
            {([
              ['email', 'Email'],
              ['phone', 'Phone'],
              ['whatsapp', 'WhatsApp'],
              ['manual', 'Manual'],
            ] as [ContactMethod, string][]).map(([method, label]) => (
              <button
                key={method}
                onClick={() => handleContact(method)}
                disabled={!canManage || savingAction === `contact-${method}`}
                className="py-2.5 rounded-xl bg-[#131b2e] text-slate-200 font-bold text-sm border border-[#574143]/10 hover:border-[#ffb2b9]/30 disabled:opacity-50"
              >
                {savingAction === `contact-${method}` ? 'Saving…' : label}
              </button>
            ))}
          </div>
        </div>

        <div>
          <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-3">Follow-up</p>
          <div className="space-y-3">
            <input
              type="datetime-local"
              value={followUpAt}
              onChange={event => setFollowUpAt(event.target.value)}
              disabled={!canManage}
              className="w-full bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50"
            />
            <textarea
              value={followUpNote}
              onChange={event => setFollowUpNote(event.target.value)}
              placeholder="Why should we follow up?"
              disabled={!canManage}
              className="w-full min-h-[72px] bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50 resize-none"
            />
            <button
              onClick={() => runAction('follow-up', () => createLeadEvent(lead.id, {
                event_type: 'follow_up_set',
                follow_up_at: followUpAt ? new Date(followUpAt).toISOString() : null,
                note: followUpNote,
              }), () => setFollowUpNote(''))}
              disabled={!canManage || !followUpAt || savingAction === 'follow-up'}
              className="w-full py-3 rounded-xl bg-[#131b2e] text-slate-200 font-black border border-[#574143]/10 hover:border-[#ffb2b9]/30 disabled:opacity-50"
            >
              {savingAction === 'follow-up' ? 'Saving Follow-up…' : 'Set Follow-up'}
            </button>
          </div>
        </div>

        <div>
          <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-3">Notes</p>
          <div className="space-y-3">
            <textarea
              value={noteText}
              onChange={event => setNoteText(event.target.value)}
              placeholder="Add context for the next person working this lead"
              disabled={!canManage}
              className="w-full min-h-[88px] bg-[#131b2e] px-3 py-3 rounded-xl border border-[#574143]/10 text-sm text-[#dae2fd] focus:outline-none disabled:opacity-50 resize-none"
            />
            <button
              onClick={() => runAction('note', () => createLeadEvent(lead.id, {
                event_type: 'note_added',
                note: noteText,
              }), () => setNoteText(''))}
              disabled={!canManage || !noteText.trim() || savingAction === 'note'}
              className="w-full py-3 rounded-xl bg-[#131b2e] text-slate-200 font-black border border-[#574143]/10 hover:border-[#ffb2b9]/30 disabled:opacity-50"
            >
              {savingAction === 'note' ? 'Saving Note…' : 'Add Note'}
            </button>
          </div>
        </div>

        <div>
          <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-3">Deal History</p>
          <div className="space-y-2">
            {detail.deal_events.length === 0 && (
              <div className="bg-[#131b2e] rounded-xl p-4 text-sm text-slate-500">
                No commercial history has been logged for this lead yet.
              </div>
            )}

            {detail.deal_events.map(event => (
              <div key={event.id} className="bg-[#131b2e] rounded-xl p-3 border border-[#574143]/10">
                <div className="flex items-start justify-between gap-3 mb-1">
                  <div>
                    <p className="text-sm font-bold text-slate-100">{formatDealEventLabel(event.event_type)}</p>
                    <p className="text-[11px] text-slate-500">
                      {event.user_display_name} · {formatDateTime(event.created_at)}
                    </p>
                  </div>
                </div>
                {(event.old_value || event.new_value) && (
                  <p className="text-[12px] text-slate-300 mb-1">
                    {event.old_value ? `${event.old_value} -> ` : ''}{event.new_value}
                  </p>
                )}
                {(event.metadata?.contract_value || event.metadata?.referral_value || event.metadata?.referral_count_delta || event.metadata?.renewal_count_delta || event.metadata?.renewal_value_delta) && (
                  <p className="text-[12px] text-slate-300 mb-1">
                    {event.metadata?.contract_value ? `Contract ${Math.round(event.metadata.contract_value).toLocaleString()} ${event.metadata.currency ?? 'EGP'}` : ''}
                    {event.metadata?.referral_count_delta ? ` · +${event.metadata.referral_count_delta} referrals` : ''}
                    {event.metadata?.referral_value_delta ? ` · +${Math.round(event.metadata.referral_value_delta).toLocaleString()} ${event.metadata.currency ?? 'EGP'}` : ''}
                    {event.metadata?.renewal_count_delta ? ` · +${event.metadata.renewal_count_delta} renewals` : ''}
                    {event.metadata?.renewal_value_delta ? ` · +${Math.round(event.metadata.renewal_value_delta).toLocaleString()} ${event.metadata.currency ?? 'EGP'}` : ''}
                  </p>
                )}
                {event.note && (
                  <p className="text-[12px] text-slate-400 leading-relaxed">{event.note}</p>
                )}
              </div>
            ))}
          </div>
        </div>

        <div>
          <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-3">Activity History</p>
          <div className="space-y-2">
            {events.length === 0 && (
              <div className="bg-[#131b2e] rounded-xl p-4 text-sm text-slate-500">
                No CRM activity has been logged for this lead yet.
              </div>
            )}

            {events.map(event => (
              <div key={event.id} className="bg-[#131b2e] rounded-xl p-3 border border-[#574143]/10">
                <div className="flex items-start justify-between gap-3 mb-1">
                  <div>
                    <p className="text-sm font-bold text-slate-100">{formatEventLabel(event.event_type)}</p>
                    <p className="text-[11px] text-slate-500">
                      {event.user_display_name} · {formatDateTime(event.created_at)}
                    </p>
                  </div>
                  {event.contact_method && (
                    <span className="px-2 py-0.5 text-[10px] font-black rounded-full bg-[#222a3d] text-slate-300 uppercase">
                      {event.contact_method}
                    </span>
                  )}
                </div>
                {(event.old_value || event.new_value) && (
                  <p className="text-[12px] text-slate-300 mb-1">
                    {event.old_value ? `${event.old_value} -> ` : ''}{event.new_value}
                  </p>
                )}
                {(event.metadata?.assigned_user_name || event.metadata?.visibility_scope) && (
                  <div className="flex flex-wrap gap-2 mb-2">
                    {event.metadata?.assigned_user_name && (
                      <span className="px-2 py-0.5 text-[10px] font-black rounded-full bg-[#222a3d] text-[#ffb2b9] uppercase">
                        {event.metadata.assigned_user_name}
                      </span>
                    )}
                    {event.metadata?.visibility_scope && (
                      <span className="px-2 py-0.5 text-[10px] font-black rounded-full bg-[#222a3d] text-slate-300 uppercase">
                        {event.metadata.visibility_scope}
                      </span>
                    )}
                  </div>
                )}
                {event.follow_up_at && (
                  <p className="text-[12px] text-slate-300 mb-1">
                    Follow-up: {formatDateTime(event.follow_up_at)}
                  </p>
                )}
                {event.metadata?.subject && (
                  <p className="text-[12px] text-slate-200 mb-2 leading-relaxed">
                    Subject: {event.metadata.subject}
                  </p>
                )}
                {(event.metadata?.language || event.metadata?.tone || event.metadata?.outreach_type) && (
                  <div className="flex flex-wrap gap-2 mb-2">
                    {event.metadata?.outreach_type && (
                      <span className="px-2 py-0.5 text-[10px] font-black rounded-full bg-[#222a3d] text-[#9fe8c4] uppercase">
                        {event.metadata.outreach_type}
                      </span>
                    )}
                    {event.metadata?.language && (
                      <span className="px-2 py-0.5 text-[10px] font-black rounded-full bg-[#222a3d] text-[#ffb2b9] uppercase">
                        {event.metadata.language}
                      </span>
                    )}
                    {event.metadata?.tone && (
                      <span className="px-2 py-0.5 text-[10px] font-black rounded-full bg-[#222a3d] text-slate-300 uppercase">
                        {event.metadata.tone}
                      </span>
                    )}
                  </div>
                )}
                {event.note && (
                  <p className="text-[12px] text-slate-400 leading-relaxed">{event.note}</p>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </aside>
  )
}