import React, { useEffect, useMemo, useState } from 'react';
import { PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
import { useResourceCalendar } from '../../hooks/useResourceCalendar';

/** ۰ = شنبه — همان قرارداد بک‌اند و ساعت کاری شعبه. */
export const DAY_LABELS = ['شنبه', 'یکشنبه', 'دوشنبه', 'سه‌شنبه', 'چهارشنبه', 'پنجشنبه', 'جمعه'];

const MINUTES_IN_DAY = 1440;

type Draft = { start: string; end: string; endOfDay: boolean };

function toTime(minute: number): string {
  return `${String(Math.floor(minute / 60)).padStart(2, '0')}:${String(minute % 60).padStart(2, '0')}`;
}

function toMinutes(time: string): number | null {
  const m = /^(\d{1,2}):(\d{2})$/.exec(time.trim());
  if (!m) return null;
  const minutes = Number(m[1]) * 60 + Number(m[2]);
  return minutes >= 0 && minutes <= MINUTES_IN_DAY ? minutes : null;
}

/**
 * شیفت هفتگی یک منبع — روزهای کاری و ساعت هر روز.
 *
 * ساعت واقعی منبع تقاطع این شیفت‌ها با ساعت کاری شعبه است، نه خودشان؛ پس شیفتِ
 * بیرون از ساعت شعبه ذخیره می‌شود ولی در دسترس‌پذیری اثری ندارد.
 */
export default function ResourceWorkingHoursPanel({ resourceUuid, canUpdate }: {
  resourceUuid?: string;
  canUpdate: boolean;
}) {
  const { calendar, loading, save } = useResourceCalendar(resourceUuid);

  const [draft, setDraft] = useState<Record<number, Draft[]>>({});
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!calendar) return;
    const next: Record<number, Draft[]> = {};
    DAY_LABELS.forEach((_, day) => {
      next[day] = (calendar.days[String(day)] ?? []).map((r) => ({
        start: toTime(r.start_minute),
        end: r.end_minute === MINUTES_IN_DAY ? '23:59' : toTime(r.end_minute),
        endOfDay: r.end_minute === MINUTES_IN_DAY,
      }));
    });
    setDraft(next);
  }, [calendar]);

  const totalShifts = useMemo(
    () => Object.values(draft).reduce((sum, rows) => sum + rows.length, 0),
    [draft],
  );

  const editRange = (day: number, index: number, patch: Partial<Draft>) =>
    setDraft((d) => ({ ...d, [day]: (d[day] ?? []).map((r, i) => (i === index ? { ...r, ...patch } : r)) }));

  const submit = () => {
    const days: Record<string, { start_minute: number; end_minute: number }[]> = {};

    for (const [dayKey, rows] of Object.entries(draft)) {
      const parsed: { start_minute: number; end_minute: number }[] = [];

      for (const row of rows) {
        const start = toMinutes(row.start);
        const end = row.endOfDay ? MINUTES_IN_DAY : toMinutes(row.end);

        if (start === null || end === null) {
          setError(`ساعت روز ${DAY_LABELS[Number(dayKey)]} را به شکل ۰۹:۰۰ وارد کنید`);
          return;
        }
        if (end <= start) {
          setError(`در روز ${DAY_LABELS[Number(dayKey)]} پایان شیفت باید بعد از شروع آن باشد`);
          return;
        }
        parsed.push({ start_minute: start, end_minute: end });
      }

      days[dayKey] = parsed;
    }

    setError(null);
    save.mutate(days);
  };

  return (
    <div style={{ display: 'grid', gap: 12 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
        <p style={{ margin: 0, fontSize: 12.5, color: 'var(--text-3)' }}>
          روزهای کاری و ساعت هر روز. ساعت واقعی از تقاطع این شیفت‌ها با ساعت کاری شعبه به‌دست
          می‌آید و تعطیلات و مرخصی از آن کسر می‌شود.
          {totalShifts > 0 && <> · {totalShifts} شیفت</>}
        </p>
        {canUpdate && (
          <button type="button" className="btn primary sm" disabled={save.isPending} onClick={submit}>
            {save.isPending ? 'در حال ذخیره...' : 'ذخیرهٔ شیفت‌ها'}
          </button>
        )}
      </div>

      {error && (
        <div
          className="card"
          style={{ padding: '12px 16px', color: 'var(--danger)', background: 'var(--danger-bg)', fontSize: 13 }}
        >
          {error}
        </div>
      )}

      {loading ? (
        <div style={{ padding: 16, color: 'var(--text-3)', fontSize: 13 }}>در حال بارگذاری...</div>
      ) : (
        <div style={{ display: 'grid', gap: 12, gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))' }}>
          {DAY_LABELS.map((label, day) => {
            const rows = draft[day] ?? [];
            return (
              <div key={day} className="card" style={{ padding: 14 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, marginBottom: rows.length ? 10 : 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ fontWeight: 700, fontSize: 14 }}>{label}</span>
                    {rows.length === 0 && <span style={{ fontSize: 12, color: 'var(--text-3)' }}>بدون شیفت</span>}
                  </div>
                  {canUpdate && (
                    <button
                      type="button"
                      className="btn secondary sm"
                      onClick={() => setDraft((d) => ({ ...d, [day]: [...(d[day] ?? []), { start: '09:00', end: '17:00', endOfDay: false }] }))}
                    >
                      <PlusIcon style={{ width: 15 }} /> شیفت
                    </button>
                  )}
                </div>

                <div style={{ display: 'grid', gap: 8 }}>
                  {rows.map((row, index) => (
                    <div key={index} style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                      <input
                        type="time"
                        className="field"
                        value={row.start}
                        disabled={!canUpdate}
                        onChange={(e) => editRange(day, index, { start: e.target.value })}
                        style={{ width: 116 }}
                      />
                      <span style={{ fontSize: 12, color: 'var(--text-3)' }}>تا</span>
                      {row.endOfDay ? (
                        <span className="field" style={{ width: 116, color: 'var(--text-2)' }}>۲۴:۰۰</span>
                      ) : (
                        <input
                          type="time"
                          className="field"
                          value={row.end}
                          disabled={!canUpdate}
                          onChange={(e) => editRange(day, index, { end: e.target.value })}
                          style={{ width: 116 }}
                        />
                      )}
                      <label style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 12, color: 'var(--text-3)' }}>
                        <input
                          type="checkbox"
                          checked={row.endOfDay}
                          disabled={!canUpdate}
                          onChange={(e) => editRange(day, index, { endOfDay: e.target.checked })}
                        />
                        تا پایان روز
                      </label>
                      {canUpdate && (
                        <button
                          type="button"
                          className="btn secondary sm"
                          onClick={() => setDraft((d) => ({ ...d, [day]: (d[day] ?? []).filter((_, i) => i !== index) }))}
                          aria-label="حذف شیفت"
                        >
                          <TrashIcon style={{ width: 15 }} />
                        </button>
                      )}
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}