import React, { useMemo } from 'react';
import { useUrlState } from '../hooks/useUrlState';
import PageHeader from '../components/ui/PageHeader';
import DataTable, { type Column } from '../components/ui/DataTable';
import SearchableSelect from '../components/ui/SearchableSelect';
import { Link } from 'react-router-dom';
import { usePlanAccuracy } from '../hooks/useReports';
import type { AccuracyRow } from '../types';

const RANGES = [
  { value: '30', label: 'ماه گذشته' },
  { value: '90', label: 'سه ماه گذشته' },
];

const SEVERITY: Record<AccuracyRow['severity'], { label: string; className: string }> = {
  none: { label: 'دقیق', className: 'badge green' },
  low: { label: 'کم', className: 'badge' },
  medium: { label: 'متوسط', className: 'badge amber' },
  high: { label: 'زیاد', className: 'badge red' },
};

/**
 * مدت پیش‌بینی‌شده در برابر مدت واقعی.
 *
 * سرویسی که یک ساعت پیش‌بینی شده ولی یک‌ساعت‌ونیم طول می‌کشد، هر روز نیم ساعت از ظرفیت
 * کلینیک را بی‌صدا می‌خورد — این صفحه تنها جایی است که آن را نشان می‌دهد.
 */
export default function PlanAccuracyPage() {
  // بازه در URL: لینکِ گزارش باید همان بازه‌ای را باز کند که فرستنده دیده بود.
  const [urlState, setUrlState] = useUrlState({ days: '30' });
  const days    = urlState.days;
  const setDays = (v: string) => setUrlState({ days: v });

  const range = useMemo(() => {
    const to = Math.floor(Date.now() / 1000);
    return { from: to - Number(days) * 86400, to };
  }, [days]);

  const { rows, loading } = usePlanAccuracy(range.from, range.to);

  const columns: Column<AccuracyRow>[] = [
    {
      key: 'service_name',
      header: 'خدمت',
      render: (r) => (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          <span style={{ fontWeight: 600 }}>{r.service_name}</span>
          <span style={{ fontSize: 12, color: 'var(--text-3)' }}>{r.sample_size} نوبت</span>
        </div>
      ),
    },
    {
      key: 'planned_minutes',
      header: 'پیش‌بینی',
      render: (r) => <span style={{ fontSize: 13 }}>{r.planned_minutes} دقیقه</span>,
    },
    {
      key: 'actual_minutes',
      header: 'واقعی',
      render: (r) => <span style={{ fontSize: 13 }}>{r.actual_minutes} دقیقه</span>,
    },
    {
      key: 'deviation_percent',
      header: 'انحراف',
      render: (r) => (
        <span
          style={{
            fontSize: 13,
            fontWeight: 600,
            color: r.severity === 'high' ? 'var(--danger)' : r.severity === 'medium' ? 'var(--warning)' : undefined,
          }}
        >
          {r.deviation_percent > 0 ? `+${r.deviation_percent}` : r.deviation_percent}٪
        </span>
      ),
    },
    {
      key: 'fix',
      header: '',
      // گزارشی که راه اصلاح ندهد خوانده نمی‌شود.
      render: (r) => (
        <Link className="btn secondary sm" to={`/admin/services?service=${r.service_uuid}`}>
          ویرایش بخش‌های این خدمت
        </Link>
      ),
    },
    {
      key: 'severity',
      header: 'شدت',
      render: (r) => (
        <span className={SEVERITY[r.severity].className}>
          <span className="bdot" />
          {SEVERITY[r.severity].label}
        </span>
      ),
    },
  ];

  return (
    <div className="fade-in">
      <PageHeader
        title="دقت برنامهٔ نوبت"
        description="مقایسهٔ مدت پیش‌بینی‌شدهٔ هر خدمت با مدت واقعی نوبت‌های انجام‌شده."
        backTo="/admin/settings-menu"
      />

      <div className="card card-pad" style={{ marginBottom: 16, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
        <div className="field-block" style={{ minWidth: 200, margin: 0 }}>
          <label>بازه</label>
          <SearchableSelect value={days} onChange={(v) => setDays(String(v ?? '30'))} options={RANGES} />
        </div>
        <span style={{ fontSize: 12, color: 'var(--text-3)', alignSelf: 'flex-end' }}>
          خدماتی با کمتر از سه نوبت انجام‌شده در گزارش نمی‌آیند.
        </span>
      </div>

      <div style={{ overflowX: 'auto' }}>
        <DataTable
          columns={columns}
          data={rows}
          loading={loading}
          emptyMessage="داده‌ای برای این بازه نیست"
        />
      </div>
    </div>
  );
}