import * as icon from '@mdi/js';
import axios from 'axios';
import Head from 'next/head';
import Link from 'next/link';
import React, { ReactElement } from 'react';
import BaseButton from '../components/BaseButton';
import CardBox from '../components/CardBox';
import SectionMain from '../components/SectionMain';
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
import LayoutAuthenticated from '../layouts/Authenticated';
import { getPageTitle } from '../config';
import { hasPermission } from '../helpers/userPermissions';
import { useAppSelector } from '../stores/hooks';

type UserRef = {
  id?: string;
  firstName?: string;
  lastName?: string;
  email?: string;
};

type EntityRef = {
  id?: string;
  name?: string;
  lead_name?: string;
  first_name?: string;
  last_name?: string;
  email?: string;
  sort_order?: number;
  win_probability?: number;
};

type Deal = {
  id: string;
  name?: string;
  amount?: string | number | null;
  forecast_category?: string | null;
  expected_close_at?: string | null;
  next_follow_up_at?: string | null;
  priority?: string | null;
  description?: string | null;
  stage?: EntityRef | null;
  company?: EntityRef | null;
  primary_contact?: EntityRef | null;
  lead?: EntityRef | null;
  owner?: UserRef | null;
};

type Activity = {
  id: string;
  activity_type?: string | null;
  subject?: string | null;
  due_at?: string | null;
  scheduled_at?: string | null;
  completed_at?: string | null;
  status?: string | null;
  deal?: Deal | null;
  lead?: EntityRef | null;
  contact?: EntityRef | null;
  assigned_to?: UserRef | null;
};

type FollowUpForm = {
  dealId: string;
  activity_type: string;
  due_at: string;
  subject: string;
  details: string;
  is_reminder_enabled: boolean;
};

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  maximumFractionDigits: 0,
});

function labelize(value?: string | null) {
  if (!value) return 'Unstaged';

  return value
    .split('_')
    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
    .join(' ');
}

function formatCurrency(value?: string | number | null) {
  const amount = Number(value || 0);

  if (Number.isNaN(amount)) return '$0';

  return currencyFormatter.format(amount);
}

function formatDate(value?: string | null) {
  if (!value) return 'Not set';

  const date = new Date(value);

  if (Number.isNaN(date.getTime())) return 'Not set';

  return date.toLocaleDateString(undefined, {
    month: 'short',
    day: 'numeric',
    year: 'numeric',
  });
}

function formatDateTime(value?: string | null) {
  if (!value) return 'Not scheduled';

  const date = new Date(value);

  if (Number.isNaN(date.getTime())) return 'Not scheduled';

  return date.toLocaleString(undefined, {
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
  });
}

function dateTimeInputValue(date: Date) {
  const local = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
  return local.toISOString().slice(0, 16);
}

function defaultDueAt() {
  const date = new Date();
  date.setDate(date.getDate() + 1);
  date.setHours(9, 0, 0, 0);
  return dateTimeInputValue(date);
}

function getOwnerName(owner?: UserRef | null) {
  const name = [owner?.firstName, owner?.lastName].filter(Boolean).join(' ');
  return name || owner?.email || 'Unassigned';
}

function getContactName(contact?: EntityRef | null) {
  const name = [contact?.first_name, contact?.last_name].filter(Boolean).join(' ');
  return name || contact?.email || 'No primary contact';
}

function isOpenDeal(deal: Deal) {
  return !['closed_won', 'closed_lost'].includes(deal.forecast_category || '');
}

function getApiErrorMessage(error: any) {
  const response = error?.response?.data;

  if (typeof response === 'string') return response;
  if (response?.message) return response.message;

  return error?.message || 'Something went wrong. Please try again.';
}

const badgeStyles: Record<string, string> = {
  urgent: 'bg-rose-100 text-rose-700 ring-1 ring-rose-200',
  high: 'bg-orange-100 text-orange-700 ring-1 ring-orange-200',
  medium: 'bg-blue-100 text-blue-700 ring-1 ring-blue-200',
  low: 'bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200',
};

const SalesCommandCenter = () => {
  const { currentUser } = useAppSelector((state) => state.auth);
  const [deals, setDeals] = React.useState<Deal[]>([]);
  const [activities, setActivities] = React.useState<Activity[]>([]);
  const [selectedDealId, setSelectedDealId] = React.useState('');
  const [loading, setLoading] = React.useState(true);
  const [submitting, setSubmitting] = React.useState(false);
  const [errorMessage, setErrorMessage] = React.useState('');
  const [successMessage, setSuccessMessage] = React.useState('');
  const [form, setForm] = React.useState<FollowUpForm>({
    dealId: '',
    activity_type: 'task',
    due_at: defaultDueAt(),
    subject: '',
    details: '',
    is_reminder_enabled: true,
  });

  const canScheduleFollowUp =
    hasPermission(currentUser, 'CREATE_ACTIVITIES') &&
    hasPermission(currentUser, 'UPDATE_DEALS');

  const loadData = React.useCallback(async () => {
    if (!currentUser) return;

    setLoading(true);
    setErrorMessage('');

    try {
      const [dealsResponse, activitiesResponse] = await Promise.all([
        axios.get('/deals', {
          params: { limit: 100, page: 0, field: 'next_follow_up_at', sort: 'asc' },
        }),
        axios.get('/activities', {
          params: { limit: 100, page: 0, field: 'due_at', sort: 'asc' },
        }),
      ]);

      const nextDeals = Array.isArray(dealsResponse.data?.rows)
        ? dealsResponse.data.rows
        : [];
      const nextActivities = Array.isArray(activitiesResponse.data?.rows)
        ? activitiesResponse.data.rows
        : [];

      setDeals(nextDeals);
      setActivities(nextActivities);
      setSelectedDealId((current) => current || nextDeals[0]?.id || '');
      setForm((current) => ({
        ...current,
        dealId: current.dealId || nextDeals[0]?.id || '',
      }));
    } catch (error) {
      console.error('Failed to load sales command center data', error);
      setErrorMessage(getApiErrorMessage(error));
    } finally {
      setLoading(false);
    }
  }, [currentUser]);

  React.useEffect(() => {
    loadData().then();
  }, [loadData]);

  React.useEffect(() => {
    if (!selectedDealId && deals[0]?.id) {
      setSelectedDealId(deals[0].id);
    }
  }, [deals, selectedDealId]);

  const selectedDeal = React.useMemo(
    () => deals.find((deal) => deal.id === selectedDealId) || deals[0],
    [deals, selectedDealId],
  );

  const pipelineColumns = React.useMemo(() => {
    const columns = deals.reduce<Record<string, { label: string; order: number; deals: Deal[] }>>(
      (acc, deal) => {
        const label = deal.stage?.name || labelize(deal.forecast_category);
        const order = deal.stage?.sort_order || 999;

        if (!acc[label]) {
          acc[label] = { label, order, deals: [] };
        }

        acc[label].deals.push(deal);
        acc[label].order = Math.min(acc[label].order, order);

        return acc;
      },
      {},
    );

    return Object.values(columns).sort((a, b) => a.order - b.order || a.label.localeCompare(b.label));
  }, [deals]);

  const openDeals = React.useMemo(() => deals.filter(isOpenDeal), [deals]);

  const plannedActivities = React.useMemo(
    () =>
      activities
        .filter((activity) => !['completed', 'canceled'].includes(activity.status || ''))
        .sort(
          (a, b) =>
            new Date(a.due_at || a.scheduled_at || 0).getTime() -
            new Date(b.due_at || b.scheduled_at || 0).getTime(),
        ),
    [activities],
  );

  const metrics = React.useMemo(() => {
    const now = new Date();
    const weekFromNow = new Date();
    weekFromNow.setDate(now.getDate() + 7);

    const pipelineValue = openDeals.reduce(
      (sum, deal) => sum + Number(deal.amount || 0),
      0,
    );
    const dueThisWeek = plannedActivities.filter((activity) => {
      const due = new Date(activity.due_at || activity.scheduled_at || 0);
      return due >= now && due <= weekFromNow;
    }).length;
    const overdue = plannedActivities.filter((activity) => {
      const due = new Date(activity.due_at || activity.scheduled_at || 0);
      return due < now;
    }).length;
    const ownedDeals = deals.filter((deal) => deal.owner?.id === currentUser?.id).length;

    return {
      pipelineValue,
      openDealCount: openDeals.length,
      dueThisWeek,
      overdue,
      ownedDeals,
    };
  }, [currentUser?.id, deals, openDeals, plannedActivities]);

  const handleFieldChange = (
    event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
  ) => {
    const { name, value, type } = event.target;
    const checked = 'checked' in event.target ? event.target.checked : false;

    setForm((current) => ({
      ...current,
      [name]: type === 'checkbox' ? checked : value,
    }));
  };

  const handleDealSelect = (dealId: string) => {
    setSelectedDealId(dealId);
    setForm((current) => ({ ...current, dealId }));
    setSuccessMessage('');
  };

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    setErrorMessage('');
    setSuccessMessage('');

    if (!form.dealId) {
      setErrorMessage('Choose a deal before scheduling a follow-up.');
      return;
    }

    if (!form.subject.trim()) {
      setErrorMessage('Add a clear subject so the follow-up is actionable.');
      return;
    }

    if (!form.due_at) {
      setErrorMessage('Choose when the follow-up is due.');
      return;
    }

    const payload = {
      ...form,
      subject: form.subject.trim(),
      details: form.details.trim(),
    };

    setSubmitting(true);

    try {
      await axios.post('/sales-workflow/follow-up', payload);
      const dealName = deals.find((deal) => deal.id === form.dealId)?.name || 'the deal';
      setSuccessMessage(`Follow-up scheduled for ${dealName}.`);
      setForm((current) => ({
        ...current,
        due_at: defaultDueAt(),
        subject: '',
        details: '',
      }));
      await loadData();
    } catch (error) {
      console.error('Failed to schedule follow-up', { payload, error });
      setErrorMessage(getApiErrorMessage(error));
    } finally {
      setSubmitting(false);
    }
  };

  const upcomingForSelectedDeal = plannedActivities.filter(
    (activity) => activity.deal?.id === selectedDeal?.id,
  );

  return (
    <>
      <Head>
        <title>{getPageTitle('Sales Command Center')}</title>
      </Head>
      <SectionMain>
        <SectionTitleLineWithButton
          icon={icon.mdiChartTimelineVariant}
          title="Sales command center"
          main
        >
          <BaseButton
            label="Refresh"
            color="whiteDark"
            onClick={() => loadData().then()}
            disabled={loading}
          />
        </SectionTitleLineWithButton>

        <div className="mb-6 overflow-hidden rounded-3xl bg-slate-950 shadow-xl ring-1 ring-slate-900/10">
          <div className="relative p-6 md:p-8">
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(45,212,191,0.35),_transparent_35%),radial-gradient(circle_at_top_right,_rgba(96,165,250,0.30),_transparent_30%)]" />
            <div className="relative grid gap-6 lg:grid-cols-[1.3fr_0.7fr] lg:items-end">
              <div>
                <p className="mb-3 inline-flex rounded-full bg-white/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-teal-200 ring-1 ring-white/15">
                  Pipeline visibility + follow-ups
                </p>
                <h2 className="max-w-3xl text-3xl font-black tracking-tight text-white md:text-5xl">
                  Know what is moving, who owns it, and what needs follow-up next.
                </h2>
                <p className="mt-4 max-w-2xl text-sm leading-6 text-slate-300 md:text-base">
                  A focused sales workspace layered on top of your existing Leads, Deals,
                  Contacts, Companies, and Activities data.
                </p>
              </div>
              <div className="rounded-2xl bg-white/10 p-4 text-white ring-1 ring-white/15 backdrop-blur">
                <p className="text-sm text-slate-300">Rep focus</p>
                <p className="mt-2 text-2xl font-bold">
                  {metrics.dueThisWeek} follow-ups due this week
                </p>
                <p className="mt-1 text-sm text-slate-300">
                  {metrics.overdue} overdue · {metrics.ownedDeals} owned by you
                </p>
              </div>
            </div>
          </div>
        </div>

        {errorMessage && (
          <div className="mb-6 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm font-medium text-rose-700">
            {errorMessage}
          </div>
        )}
        {successMessage && (
          <div className="mb-6 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-700">
            {successMessage}
          </div>
        )}

        <div className="mb-6 grid grid-cols-1 gap-4 md:grid-cols-4">
          <MetricCard label="Open pipeline" value={formatCurrency(metrics.pipelineValue)} helper="Active deal value" />
          <MetricCard label="Open deals" value={String(metrics.openDealCount)} helper="Not won/lost" />
          <MetricCard label="Due this week" value={String(metrics.dueThisWeek)} helper="Planned activities" />
          <MetricCard label="Overdue" value={String(metrics.overdue)} helper="Needs attention" tone="danger" />
        </div>

        <div className="grid grid-cols-1 gap-6 xl:grid-cols-[1.4fr_0.6fr]">
          <div className="space-y-6">
            <CardBox className="border-0 shadow-sm">
              <div className="mb-4 flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
                <div>
                  <h3 className="text-xl font-bold text-slate-900 dark:text-white">Pipeline board</h3>
                  <p className="text-sm text-slate-500 dark:text-slate-400">
                    Grouped by stage when available, with forecast fallback.
                  </p>
                </div>
                <BaseButton href="/deals/deals-new" label="New deal" color="info" />
              </div>

              {loading ? (
                <div className="rounded-2xl border border-dashed border-slate-300 p-8 text-center text-slate-500">
                  Loading the pipeline...
                </div>
              ) : pipelineColumns.length === 0 ? (
                <div className="rounded-2xl border border-dashed border-slate-300 p-8 text-center">
                  <p className="text-lg font-semibold text-slate-800 dark:text-white">No deals yet</p>
                  <p className="mt-2 text-sm text-slate-500">
                    Create your first deal, then schedule follow-ups from this workspace.
                  </p>
                  <BaseButton href="/deals/deals-new" label="Create first deal" color="info" className="mt-4" />
                </div>
              ) : (
                <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 2xl:grid-cols-4">
                  {pipelineColumns.map((column) => {
                    const columnValue = column.deals.reduce(
                      (sum, deal) => sum + Number(deal.amount || 0),
                      0,
                    );

                    return (
                      <div key={column.label} className="rounded-2xl bg-slate-50 p-3 ring-1 ring-slate-200 dark:bg-dark-800 dark:ring-dark-700">
                        <div className="mb-3 flex items-start justify-between gap-3">
                          <div>
                            <p className="font-bold text-slate-900 dark:text-white">{column.label}</p>
                            <p className="text-xs text-slate-500">
                              {column.deals.length} deals · {formatCurrency(columnValue)}
                            </p>
                          </div>
                        </div>
                        <div className="space-y-3">
                          {column.deals.map((deal) => {
                            const isSelected = selectedDeal?.id === deal.id;
                            return (
                              <button
                                key={deal.id}
                                type="button"
                                onClick={() => handleDealSelect(deal.id)}
                                className={`w-full rounded-2xl border bg-white p-4 text-left shadow-sm transition hover:-translate-y-0.5 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-teal-400 dark:bg-dark-900 ${
                                  isSelected
                                    ? 'border-teal-400 ring-2 ring-teal-200'
                                    : 'border-slate-200 dark:border-dark-700'
                                }`}
                              >
                                <div className="flex items-start justify-between gap-3">
                                  <p className="font-semibold text-slate-900 dark:text-white">{deal.name || 'Untitled deal'}</p>
                                  {deal.priority && (
                                    <span className={`shrink-0 rounded-full px-2 py-0.5 text-[11px] font-semibold ${badgeStyles[deal.priority] || 'bg-slate-100 text-slate-600'}`}>
                                      {labelize(deal.priority)}
                                    </span>
                                  )}
                                </div>
                                <div className="mt-3 flex items-center justify-between text-sm">
                                  <span className="font-bold text-slate-900 dark:text-white">{formatCurrency(deal.amount)}</span>
                                  <span className="text-slate-500">Close {formatDate(deal.expected_close_at)}</span>
                                </div>
                                <p className="mt-3 text-xs text-slate-500">
                                  Next follow-up: {formatDateTime(deal.next_follow_up_at)}
                                </p>
                              </button>
                            );
                          })}
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
            </CardBox>

            <CardBox className="border-0 shadow-sm">
              <div className="mb-4 flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
                <div>
                  <h3 className="text-xl font-bold text-slate-900 dark:text-white">Next follow-ups</h3>
                  <p className="text-sm text-slate-500 dark:text-slate-400">
                    Planned calls, emails, meetings, demos, notes, and tasks.
                  </p>
                </div>
                <BaseButton href="/activities/activities-list" label="All activities" color="whiteDark" />
              </div>

              {plannedActivities.length === 0 ? (
                <div className="rounded-2xl border border-dashed border-slate-300 p-8 text-center text-slate-500">
                  No planned follow-ups. Select a deal and schedule one to keep momentum.
                </div>
              ) : (
                <div className="divide-y divide-slate-100 dark:divide-dark-700">
                  {plannedActivities.slice(0, 8).map((activity) => (
                    <button
                      key={activity.id}
                      type="button"
                      onClick={() => activity.deal?.id && handleDealSelect(activity.deal.id)}
                      className="grid w-full gap-3 py-4 text-left transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-teal-400 dark:hover:bg-dark-800 md:grid-cols-[0.9fr_1.2fr_0.8fr]"
                    >
                      <div>
                        <span className="rounded-full bg-teal-50 px-2.5 py-1 text-xs font-bold uppercase tracking-wide text-teal-700 ring-1 ring-teal-100">
                          {labelize(activity.activity_type)}
                        </span>
                        <p className="mt-2 text-sm text-slate-500">{formatDateTime(activity.due_at || activity.scheduled_at)}</p>
                      </div>
                      <div>
                        <p className="font-semibold text-slate-900 dark:text-white">{activity.subject || 'Untitled activity'}</p>
                        <p className="mt-1 text-sm text-slate-500">{activity.deal?.name || activity.lead?.lead_name || 'No linked deal'}</p>
                      </div>
                      <div className="text-sm text-slate-500 md:text-right">
                        Owner: {getOwnerName(activity.assigned_to)}
                      </div>
                    </button>
                  ))}
                </div>
              )}
            </CardBox>
          </div>

          <aside className="space-y-6">
            <CardBox className="border-0 shadow-sm">
              <h3 className="text-xl font-bold text-slate-900 dark:text-white">Deal detail</h3>
              {selectedDeal ? (
                <div className="mt-4 space-y-4">
                  <div className="rounded-2xl bg-gradient-to-br from-teal-50 to-blue-50 p-4 ring-1 ring-teal-100 dark:from-dark-800 dark:to-dark-900 dark:ring-dark-700">
                    <p className="text-xs font-semibold uppercase tracking-wider text-teal-700">Selected deal</p>
                    <h4 className="mt-2 text-2xl font-black text-slate-950 dark:text-white">{selectedDeal.name || 'Untitled deal'}</h4>
                    <p className="mt-2 text-sm text-slate-600 dark:text-slate-400">{selectedDeal.description || 'No description added yet.'}</p>
                  </div>
                  <DetailRow label="Value" value={formatCurrency(selectedDeal.amount)} />
                  <DetailRow label="Forecast" value={labelize(selectedDeal.forecast_category)} />
                  <DetailRow label="Owner" value={getOwnerName(selectedDeal.owner)} />
                  <DetailRow label="Company" value={selectedDeal.company?.name || 'No company'} />
                  <DetailRow label="Contact" value={getContactName(selectedDeal.primary_contact)} />
                  <DetailRow label="Expected close" value={formatDate(selectedDeal.expected_close_at)} />
                  <DetailRow label="Next follow-up" value={formatDateTime(selectedDeal.next_follow_up_at)} />
                  <div className="flex flex-wrap gap-2 pt-2">
                    <BaseButton href={`/deals/${selectedDeal.id}`} label="Open deal" color="info" />
                    <BaseButton href="/deals/deals-list" label="Deals list" color="whiteDark" />
                  </div>
                </div>
              ) : (
                <p className="mt-4 text-sm text-slate-500">Select a deal to see ownership, contacts, and follow-up context.</p>
              )}
            </CardBox>

            <CardBox className="border-0 shadow-sm">
              <h3 className="text-xl font-bold text-slate-900 dark:text-white">Schedule follow-up</h3>
              <p className="mt-1 text-sm text-slate-500">
                Creates an Activity and updates the deal’s next follow-up date in one workflow.
              </p>

              {!canScheduleFollowUp && (
                <div className="mt-4 rounded-2xl border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800">
                  You need Create Activities and Update Deals permissions to use this quick action.
                </div>
              )}

              <form className="mt-5 space-y-4" onSubmit={handleSubmit}>
                <label className="block text-sm font-semibold text-slate-700 dark:text-slate-200">
                  Deal
                  <select
                    name="dealId"
                    value={form.dealId || selectedDeal?.id || ''}
                    onChange={(event) => handleDealSelect(event.target.value)}
                    className="mt-2 h-11 w-full rounded-xl border border-slate-300 bg-white px-3 text-slate-900 focus:border-teal-400 focus:outline-none focus:ring-2 focus:ring-teal-200 dark:border-dark-700 dark:bg-dark-800 dark:text-white"
                  >
                    {deals.length === 0 && <option value="">No deals available</option>}
                    {deals.map((deal) => (
                      <option key={deal.id} value={deal.id}>{deal.name || 'Untitled deal'}</option>
                    ))}
                  </select>
                </label>

                <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-1 2xl:grid-cols-2">
                  <label className="block text-sm font-semibold text-slate-700 dark:text-slate-200">
                    Type
                    <select
                      name="activity_type"
                      value={form.activity_type}
                      onChange={handleFieldChange}
                      className="mt-2 h-11 w-full rounded-xl border border-slate-300 bg-white px-3 text-slate-900 focus:border-teal-400 focus:outline-none focus:ring-2 focus:ring-teal-200 dark:border-dark-700 dark:bg-dark-800 dark:text-white"
                    >
                      <option value="call">Call</option>
                      <option value="email">Email</option>
                      <option value="meeting">Meeting</option>
                      <option value="task">Task</option>
                      <option value="demo">Demo</option>
                      <option value="note">Note</option>
                    </select>
                  </label>
                  <label className="block text-sm font-semibold text-slate-700 dark:text-slate-200">
                    Due
                    <input
                      name="due_at"
                      type="datetime-local"
                      value={form.due_at}
                      onChange={handleFieldChange}
                      className="mt-2 h-11 w-full rounded-xl border border-slate-300 bg-white px-3 text-slate-900 focus:border-teal-400 focus:outline-none focus:ring-2 focus:ring-teal-200 dark:border-dark-700 dark:bg-dark-800 dark:text-white"
                    />
                  </label>
                </div>

                <label className="block text-sm font-semibold text-slate-700 dark:text-slate-200">
                  Subject
                  <input
                    name="subject"
                    value={form.subject}
                    onChange={handleFieldChange}
                    placeholder={selectedDeal ? `Follow up on ${selectedDeal.name}` : 'Follow up with prospect'}
                    className="mt-2 h-11 w-full rounded-xl border border-slate-300 bg-white px-3 text-slate-900 focus:border-teal-400 focus:outline-none focus:ring-2 focus:ring-teal-200 dark:border-dark-700 dark:bg-dark-800 dark:text-white"
                  />
                </label>

                <label className="block text-sm font-semibold text-slate-700 dark:text-slate-200">
                  Notes
                  <textarea
                    name="details"
                    value={form.details}
                    onChange={handleFieldChange}
                    placeholder="Agenda, next step, or reminder context..."
                    className="mt-2 min-h-24 w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-slate-900 focus:border-teal-400 focus:outline-none focus:ring-2 focus:ring-teal-200 dark:border-dark-700 dark:bg-dark-800 dark:text-white"
                  />
                </label>

                <label className="flex items-center gap-3 rounded-2xl bg-slate-50 p-3 text-sm font-semibold text-slate-700 ring-1 ring-slate-200 dark:bg-dark-800 dark:text-slate-200 dark:ring-dark-700">
                  <input
                    name="is_reminder_enabled"
                    type="checkbox"
                    checked={form.is_reminder_enabled}
                    onChange={handleFieldChange}
                    className="h-4 w-4 rounded border-slate-300 text-teal-600 focus:ring-teal-500"
                  />
                  Enable reminder 30 minutes before due time
                </label>

                <BaseButton
                  type="submit"
                  label={submitting ? 'Scheduling...' : 'Schedule follow-up'}
                  color="info"
                  className="w-full"
                  disabled={submitting || !canScheduleFollowUp || deals.length === 0}
                />
              </form>
            </CardBox>

            <CardBox className="border-0 shadow-sm">
              <h3 className="text-xl font-bold text-slate-900 dark:text-white">Selected deal follow-ups</h3>
              {upcomingForSelectedDeal.length === 0 ? (
                <p className="mt-3 text-sm text-slate-500">No planned activities for this deal yet.</p>
              ) : (
                <div className="mt-3 space-y-3">
                  {upcomingForSelectedDeal.slice(0, 4).map((activity) => (
                    <Link
                      key={activity.id}
                      href={`/activities/${activity.id}`}
                      className="block rounded-2xl border border-slate-200 p-3 transition hover:border-teal-300 hover:bg-teal-50 dark:border-dark-700 dark:hover:bg-dark-800"
                    >
                      <p className="font-semibold text-slate-900 dark:text-white">{activity.subject}</p>
                      <p className="text-sm text-slate-500">{formatDateTime(activity.due_at || activity.scheduled_at)}</p>
                    </Link>
                  ))}
                </div>
              )}
            </CardBox>
          </aside>
        </div>
      </SectionMain>
    </>
  );
};

const MetricCard = ({
  label,
  value,
  helper,
  tone = 'default',
}: {
  label: string;
  value: string;
  helper: string;
  tone?: 'default' | 'danger';
}) => (
  <CardBox className="border-0 shadow-sm">
    <div className="flex items-start justify-between gap-3">
      <div>
        <p className="text-sm font-semibold text-slate-500 dark:text-slate-400">{label}</p>
        <p className="mt-2 text-3xl font-black tracking-tight text-slate-950 dark:text-white">{value}</p>
        <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">{helper}</p>
      </div>
      <div className={`h-12 w-12 rounded-2xl ${tone === 'danger' ? 'bg-rose-100' : 'bg-teal-100'}`} />
    </div>
  </CardBox>
);

const DetailRow = ({ label, value }: { label: string; value: string }) => (
  <div className="flex items-start justify-between gap-4 border-b border-slate-100 pb-3 text-sm last:border-0 dark:border-dark-700">
    <span className="text-slate-500 dark:text-slate-400">{label}</span>
    <span className="max-w-[60%] text-right font-semibold text-slate-900 dark:text-white">{value}</span>
  </div>
);

SalesCommandCenter.getLayout = function getLayout(page: ReactElement) {
  return <LayoutAuthenticated permission="READ_DEALS">{page}</LayoutAuthenticated>;
};

export default SalesCommandCenter;
