"use client";
import { useState, useEffect } from "react";

// Project palette — cycled by index
const PROJECT_COLORS = ["#16302A", "#8A5A3B", "#2D5F87", "#7A4B86"];

type SyncStatus = "synced" | "pending" | "failed";

interface TimeEntry {
  id: string;
  projectName: string;
  projectColor: string;
  taskType: string;
  note: string;
  durationLabel: string;
  timeRange: string;
  billable: boolean;
  sync: SyncStatus;
}

interface LogSectionProps {
  title: string;
  total: string;
  entries: TimeEntry[];
}

// ── Pulsing live-indicator dot ──────────────────────────────
function PulsingDot({ active }: { active: boolean }) {
  return (
    <div style={{ position: "relative", width: 8, height: 8, flexShrink: 0 }}>
      <div style={{
        position: "absolute", inset: 0, borderRadius: 4,
        background: active ? "rgb(var(--accent))" : "rgb(var(--text-tertiary))",
        ...(active && { animation: "timer-pulse 1.6s ease-out infinite" }),
      }} />
      <style>{`
        @keyframes timer-pulse {
          0%   { box-shadow: 0 0 0 0 rgba(var(--accent) / 0.55); }
          70%  { box-shadow: 0 0 0 8px rgba(var(--accent) / 0); }
          100% { box-shadow: 0 0 0 0 rgba(var(--accent) / 0); }
        }
      `}</style>
    </div>
  );
}

// ── Active timer card ───────────────────────────────────────
export function ActiveTimerCard({
  projectName,
  projectColor,
  taskType,
  note,
  running,
  elapsedSeconds,
  onToggle,
}: {
  projectName: string;
  projectColor: string;
  taskType: string;
  note: string;
  running: boolean;
  elapsedSeconds: number;
  onToggle: () => void;
}) {
  const hh = String(Math.floor(elapsedSeconds / 3600)).padStart(2, "0");
  const mm = String(Math.floor((elapsedSeconds % 3600) / 60)).padStart(2, "0");
  const ss = String(elapsedSeconds % 60).padStart(2, "0");

  return (
    <div style={{
      background: "rgb(var(--surface))",
      borderRadius: 16,
      border: "1px solid rgb(var(--border))",
      boxShadow: "0 1px 0 rgba(0,0,0,0.04)",
      overflow: "hidden",
    }}>
      {/* Row 1 — Project + Task type selectors */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", borderBottom: "1px solid rgb(var(--border))" }}>
        <button style={{
          all: "unset", cursor: "pointer",
          padding: "12px 14px", display: "flex", alignItems: "center", gap: 9,
          borderRight: "1px solid rgb(var(--border))",
        }}>
          <span style={{ width: 8, height: 8, borderRadius: 2, background: projectColor, flexShrink: 0 }} />
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ fontSize: 9.5, fontWeight: 600, color: "rgb(var(--text-tertiary))", letterSpacing: "0.12em", textTransform: "uppercase" }}>
              Project
            </div>
            <div style={{ fontSize: 14, fontWeight: 600, color: "rgb(var(--text-primary))", marginTop: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
              {projectName}
            </div>
          </div>
          <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
            <path d="M2.5 4l2.5 2.5L7.5 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>
        <button style={{
          all: "unset", cursor: "pointer",
          padding: "12px 14px", display: "flex", alignItems: "center", gap: 9,
        }}>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ fontSize: 9.5, fontWeight: 600, color: "rgb(var(--text-tertiary))", letterSpacing: "0.12em", textTransform: "uppercase" }}>
              Task type
            </div>
            <div style={{ fontSize: 14, fontWeight: 600, color: "rgb(var(--text-primary))", marginTop: 1 }}>
              {taskType}
            </div>
          </div>
          <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
            <path d="M2.5 4l2.5 2.5L7.5 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>
      </div>

      {/* Row 2 — Note */}
      <div style={{
        padding: "10px 14px",
        borderBottom: "1px solid rgb(var(--border))",
        fontSize: 13.5, color: note ? "rgb(var(--text-secondary))" : "rgb(var(--text-tertiary))",
        lineHeight: "18px",
      }}>
        {note || "Add a note…"}
      </div>

      {/* Row 3 — Live timer + action */}
      <div style={{
        padding: "12px 14px",
        display: "flex", alignItems: "center", gap: 12,
        background: running ? "linear-gradient(180deg, rgb(var(--surface)) 0%, rgb(var(--surface-raised)) 100%)" : "rgb(var(--surface))",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, flex: 1, minWidth: 0 }}>
          <PulsingDot active={running} />
          <div style={{
            fontSize: 28, fontWeight: 600,
            color: "rgb(var(--text-primary))",
            letterSpacing: "-0.01em", lineHeight: 1,
            fontVariantNumeric: "tabular-nums",
            fontFamily: "ui-monospace, monospace",
          }}>
            {hh}<span style={{ color: "rgb(var(--text-tertiary))" }}>:</span>
            {mm}<span style={{ color: "rgb(var(--text-tertiary))" }}>:</span>
            {ss}
          </div>
        </div>
        <button
          onClick={onToggle}
          style={{
            all: "unset", cursor: "pointer",
            background: "rgb(var(--accent))",
            color: "rgb(var(--accent-foreground))",
            height: 42, padding: "0 18px 0 14px",
            borderRadius: 10,
            display: "flex", alignItems: "center", gap: 8,
            fontSize: 14, fontWeight: 600,
          }}
        >
          {running ? "Pause" : "Resume"}
        </button>
      </div>
    </div>
  );
}

// ── Log section + rows ──────────────────────────────────────
function SyncIndicator({ status }: { status: SyncStatus }) {
  const colors: Record<SyncStatus, string> = {
    synced:  "#5C8C5A",
    pending: "rgb(var(--text-tertiary))",
    failed:  "#C9533F",
  };
  return (
    <div
      style={{ width: 13, height: 13, borderRadius: "50%", background: colors[status], opacity: 0.8 }}
      title={status}
    />
  );
}

function LogRow({ entry, isLast }: { entry: TimeEntry; isLast: boolean }) {
  return (
    <div style={{
      padding: "12px 16px",
      display: "flex", alignItems: "flex-start", gap: 12,
      borderBottom: isLast ? "none" : "1px solid rgb(var(--border-subtle))",
    }}>
      {/* Project color rail */}
      <div style={{
        width: 4, alignSelf: "stretch",
        borderRadius: 2, background: entry.projectColor,
        marginTop: 2, marginBottom: 2, flexShrink: 0,
      }} />

      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 2 }}>
          <span style={{
            fontSize: 14, fontWeight: 600,
            color: "rgb(var(--text-primary))", letterSpacing: "-0.005em",
            overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
          }}>
            {entry.projectName}
          </span>
          <span style={{
            fontSize: 10, fontWeight: 600,
            color: "rgb(var(--text-tertiary))", letterSpacing: "0.08em",
            textTransform: "uppercase", whiteSpace: "nowrap", flexShrink: 0,
          }}>
            · {entry.taskType}
          </span>
        </div>
        <div style={{ fontSize: 13, color: "rgb(var(--text-secondary))", lineHeight: "18px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
          {entry.note}
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 6 }}>
          <span style={{ fontSize: 11, color: "rgb(var(--text-tertiary))", fontVariantNumeric: "tabular-nums" }}>
            {entry.timeRange}
          </span>
          <span style={{ width: 3, height: 3, borderRadius: 1.5, background: "rgb(var(--border))" }} />
          <span style={{ fontSize: 11, color: "rgb(var(--text-tertiary))" }}>
            {entry.billable ? "Billable" : "Internal"}
          </span>
        </div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 4, flexShrink: 0 }}>
        <span style={{ fontSize: 16, fontWeight: 600, color: "rgb(var(--text-primary))", fontVariantNumeric: "tabular-nums" }}>
          {entry.durationLabel}
        </span>
        <SyncIndicator status={entry.sync} />
      </div>
    </div>
  );
}

export function LogSection({ title, total, entries }: LogSectionProps) {
  return (
    <div>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", padding: "18px 16px 8px" }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
          <h3 style={{ margin: 0, fontSize: 13, fontWeight: 600, color: "rgb(var(--text-primary))", letterSpacing: "0.04em", textTransform: "uppercase" }}>
            {title}
          </h3>
          <span style={{ fontSize: 11, color: "rgb(var(--text-tertiary))" }}>{entries.length} entries</span>
        </div>
        <span style={{ fontSize: 13, fontWeight: 600, color: "rgb(var(--text-primary))", fontVariantNumeric: "tabular-nums" }}>
          {total}
        </span>
      </div>
      <div style={{
        background: "rgb(var(--surface))",
        borderRadius: 14, margin: "0 16px",
        border: "1px solid rgb(var(--border))",
        overflow: "hidden",
      }}>
        {entries.map((e, i) => <LogRow key={e.id} entry={e} isLast={i === entries.length - 1} />)}
      </div>
    </div>
  );
}

// ── Manual log strip ────────────────────────────────────────
export function ManualLogStrip({ onAdd, onResume }: { onAdd: () => void; onResume: () => void }) {
  const dashed: React.CSSProperties = {
    all: "unset" as "unset",
    cursor: "pointer",
    flex: 1, padding: "9px 12px",
    display: "flex", alignItems: "center", gap: 8,
    fontSize: 13, fontWeight: 500,
    color: "rgb(var(--text-secondary))",
    border: "1.5px dashed rgb(var(--border-strong))",
    borderRadius: 10,
  };
  const solid: React.CSSProperties = {
    all: "unset" as "unset",
    cursor: "pointer",
    padding: "9px 12px",
    display: "flex", alignItems: "center", gap: 6,
    fontSize: 13, fontWeight: 500,
    color: "rgb(var(--text-secondary))",
    border: "1px solid rgb(var(--border-strong))",
    borderRadius: 10,
  };
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 16px 0" }}>
      <button style={dashed} onClick={onAdd}>
        <svg width="14" height="14" viewBox="0 0 14 14"><path d="M7 2v10M2 7h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
        Add manual entry
      </button>
      <button style={solid} onClick={onResume}>
        Resume…
      </button>
    </div>
  );
}