// project-timesheet-tab.jsx — таймшіт для ГО проектів

function ProjectTimesheetTab({ project, role }) {
  const [timesheets, setTimesheets] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [editing, setEditing] = React.useState(null);
  const [filterDate, setFilterDate] = React.useState("2026-06");
  const m = window.formatMoney;

  React.useEffect(() => {
    loadTimesheets();
  }, [project.id]);

  const loadTimesheets = async () => {
    setLoading(true);
    try {
      const data = await window.loadProjectTimesheets(project.id);
      setTimesheets(data || []);
    } catch (e) {
      console.error("[ERP] Load error:", e);
    } finally {
      setLoading(false);
    }
  };

  const handleSave = async (data) => {
    try {
      await window.saveProjectTimesheet({
        ...data,
        project: project.id,
        dailyHours: parseFloat(data.dailyHours),
        hourlyRate: Math.round(parseFloat(data.hourlyRate) * 100)
      });
      await loadTimesheets();
      setEditing(null);
    } catch (e) {
      alert("Помилка: " + e.message);
    }
  };

  const handleDelete = async (id) => {
    if (!confirm("Видалити запис?")) return;
    try {
      await window.deleteProjectTimesheet(id, project.id);
      await loadTimesheets();
    } catch (e) {
      alert("Помилка: " + e.message);
    }
  };

  const canEdit = ["director", "accountant", "hr_team"].includes(role);
  const filtered = timesheets.filter(ts => !filterDate || ts.date.startsWith(filterDate));
  const totalHours = filtered.reduce((s, ts) => s + (ts.dailyHours || 0), 0);
  const totalAmount = filtered.reduce((s, ts) => s + ((ts.dailyHours || 0) * (ts.hourlyRate || 0) / 100), 0);

  return (
    <div className="tab-content">
      <div className="stats-grid">
        <div className="stat-card">
          <div className="stat-label">Днів роботи</div>
          <div className="stat-value">{filtered.length}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">Всього годин</div>
          <div className="stat-value">{totalHours.toFixed(1)}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">До сплати</div>
          <div className="stat-value tone-live">{m(Math.round(totalAmount * 100))} ₴</div>
        </div>
      </div>

      <div style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 20 }}>
        <input
          type="month"
          value={filterDate}
          onChange={e => setFilterDate(e.target.value)}
          className="cp-input"
          style={{ flex: "0 0 160px" }}
        />
        {canEdit && (
          <button className="btn btn-primary" onClick={() => setEditing({})}>
            + Новий день
          </button>
        )}
      </div>

      {loading ? (
        <div className="loading">Завантаження...</div>
      ) : filtered.length === 0 ? (
        <div className="empty">Немає записів за цей період</div>
      ) : (
        <div style={{ overflowX: "auto" }}>
          <table className="data-table">
            <thead>
              <tr>
                <th>Дата</th>
                <th className="text-right">Години</th>
                <th className="text-right">Ставка/год</th>
                <th className="text-right">Сума</th>
                <th>Примітка</th>
                <th>Скріншот</th>
                {canEdit && <th>Дії</th>}
              </tr>
            </thead>
            <tbody>
              {filtered.map(ts => (
                <TimesheetRow
                  key={ts.id}
                  ts={ts}
                  isEditing={editing?.id === ts.id}
                  onEdit={() => setEditing(ts)}
                  onSave={handleSave}
                  onDelete={() => handleDelete(ts.id)}
                  canEdit={canEdit}
                  m={m}
                />
              ))}
            </tbody>
          </table>
        </div>
      )}

      {editing && (
        <TimesheetModal
          ts={editing}
          onSave={handleSave}
          onClose={() => setEditing(null)}
        />
      )}
    </div>
  );
}

function TimesheetRow({ ts, isEditing, onEdit, onSave, onDelete, canEdit, m }) {
  const hours = ts.dailyHours || 0;
  const rate = ts.hourlyRate || 0;
  const amount = hours * rate / 100;

  if (isEditing) {
    return (
      <tr>
        <td colSpan="7" style={{ padding: 20 }}>
          <TimesheetModal ts={ts} onSave={onSave} onClose={onEdit} />
        </td>
      </tr>
    );
  }

  return (
    <tr>
      <td>{ts.date}</td>
      <td className="text-right">{hours.toFixed(1)}</td>
      <td className="text-right">{m(rate)} ₴</td>
      <td className="text-right" style={{ fontWeight: 500 }}>{m(Math.round(amount * 100))} ₴</td>
      <td>{ts.note || "—"}</td>
      <td>{ts.screenshot ? "✓" : "—"}</td>
      {canEdit && (
        <td style={{ whiteSpace: "nowrap" }}>
          <button className="btn-icon" onClick={onEdit} title="Редагувати">✎</button>
          <button className="btn-icon" onClick={onDelete} title="Видалити">✕</button>
        </td>
      )}
    </tr>
  );
}

function TimesheetModal({ ts, onSave, onClose }) {
  const getSysDate = () => new Date().toISOString().split("T")[0];
  const [form, setForm] = React.useState({
    date: ts.date || getSysDate(),
    employee: ts.employee || "",
    dailyHours: ts.dailyHours || "",
    note: ts.note || ""
  });
  const [hourlyRate, setHourlyRate] = React.useState(ts.hourlyRate ? ts.hourlyRate / 100 : "");
  const [screenshotFile, setScreenshotFile] = React.useState(null);

  React.useEffect(() => {
    // Завантажити ID користувача при відкритті
    const loadUser = async () => {
      if (!form.employee && window.getCurrentUserId) {
        try {
          const userId = await window.getCurrentUserId();
          if (userId) {
            setForm(prev => ({ ...prev, employee: userId }));
          }
        } catch (e) {
          console.error("[ERP] Failed to get user:", e);
        }
      }
    };
    loadUser();
  }, []);

  const handleSave = () => {
    if (!form.date) { alert("Виберіть дату"); return; }
    if (!form.dailyHours || parseFloat(form.dailyHours) <= 0) { alert("Введіть години > 0"); return; }
    if (!hourlyRate || parseFloat(hourlyRate) <= 0) { alert("Введіть ставку > 0"); return; }
    if (!form.employee) { alert("Завантажується користувач..."); return; }
    if (!screenshotFile && !form.screenshot) { alert("Завантажте скріншот"); return; }

    onSave({
      ...form,
      hourlyRate: Math.round(parseFloat(hourlyRate) * 100),
      screenshot: screenshotFile || form.screenshot
    });
  };

  return (
    <React.Fragment>
      <div className="drawer-overlay" onClick={onClose}></div>
      <div className="report-modal" style={{ maxWidth: 550 }}>
        <div className="report-toolbar">
          <button className="drawer-close" onClick={onClose}>✕</button>
          <div>Запис таймшіту</div>
        </div>

        <div style={{ padding: "20px 26px" }}>
          <div style={{ display: "grid", gap: 14 }}>
            <div>
              <label className="cp-label">Дата роботи</label>
              <input
                type="date"
                className="cp-input"
                value={form.date}
                onChange={e => setForm({ ...form, date: e.target.value })}
              />
            </div>

            <div>
              <label className="cp-label">Години за день</label>
              <input
                type="number"
                className="cp-input"
                value={form.dailyHours}
                onChange={e => setForm({ ...form, dailyHours: e.target.value })}
                step="0.5"
                min="0"
                placeholder="напр. 8"
              />
            </div>

            <div>
              <label className="cp-label">Ставка за годину (₴)</label>
              <input
                type="number"
                className="cp-input"
                value={hourlyRate}
                onChange={e => setHourlyRate(e.target.value)}
                step="0.01"
                min="0"
                placeholder="напр. 300"
              />
            </div>

            <div>
              <label className="cp-label">Опис роботи</label>
              <textarea
                className="cp-input"
                value={form.note}
                onChange={e => setForm({ ...form, note: e.target.value })}
                placeholder="Що робили цього дня?"
                style={{ minHeight: 60 }}
              />
            </div>

            <div>
              <label className="cp-label">Скріншот (обов'язково)</label>
              <div
                style={{
                  border: "2px dashed var(--line)",
                  borderRadius: 8,
                  padding: 20,
                  textAlign: "center",
                  cursor: "pointer",
                  background: screenshotFile ? "var(--surface-2)" : "transparent"
                }}
                onClick={() => document.getElementById("screenshot-input").click()}
              >
                {screenshotFile ? (
                  <div style={{ fontSize: 12, color: "var(--ink-2)" }}>
                    ✓ {screenshotFile.name}
                  </div>
                ) : form.screenshot ? (
                  <div style={{ fontSize: 12, color: "var(--ink-2)" }}>
                    ✓ Скріншот завантажено
                  </div>
                ) : (
                  <div style={{ fontSize: 12, color: "var(--ink-3)" }}>
                    📷 Клікни для завантаження скріншота
                  </div>
                )}
              </div>
              <input
                id="screenshot-input"
                type="file"
                accept="image/*"
                onChange={e => setScreenshotFile(e.target.files?.[0] || null)}
                style={{ display: "none" }}
              />
            </div>

            <div style={{ display: "flex", gap: 8, marginTop: 20 }}>
              <button className="btn btn-primary" onClick={handleSave}>
                💾 Зберегти
              </button>
              <button className="btn btn-ghost" onClick={onClose}>
                Скасувати
              </button>
            </div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

window.ProjectTimesheetTab = ProjectTimesheetTab;