import { useId, type CSSProperties, type ReactNode } from "react";
import { Check, Circle, Hash, ChevronDown, ListChecks } from "lucide-react";
import { CalendarHeatmap } from "./CalendarHeatmap";
import { demoCalendar } from "./calendar-model";

/** A shared habit identity, visible history, and goal-specific completion surface. */
export function HabitChart({
  name,
  method,
  value,
  target,
  unit,
  color,
  children,
  headingActions,
  editor,
  tasks,
  tasksLabel = "Tasks for today",
  calendar,
  schedule = "Every day",
  due = true,
  id,
  headingLevel = 4,
  trackingMethod,
  checkInId,
}: {
  name: string;
  method: string;
  value: number;
  target: number;
  unit: string;
  color: string;
  children?: ReactNode;
  headingActions?: ReactNode;
  editor?: ReactNode;
  tasks?: ReactNode;
  tasksLabel?: string;
  calendar?: ReactNode;
  schedule?: string;
  due?: boolean;
  id?: string;
  headingLevel?: 3 | 4;
  trackingMethod?: "manual" | "count" | "tasks";
  checkInId?: string;
}) {
  const headingId = useId();
  const Heading = `h${headingLevel}` as const;
  const complete = due && target > 0 && value >= target;
  const TypeIcon = trackingMethod === "count" ? Hash : trackingMethod === "tasks" ? ListChecks : Check;
  if (trackingMethod) return (
    <section className={`ds-habit-chart ds-goal ds-goal--${trackingMethod}`} id={id} aria-labelledby={headingId} style={{ "--habit-color": color } as CSSProperties}>
      <header className="ds-goal-heading">
        <div className="ds-goal-identity">
          <div className="ds-goal-meta"><span className="ds-goal-swatch" aria-hidden="true" /><TypeIcon size={16} aria-hidden="true" /><span>{method}</span>{schedule !== "Every day" && <span className="ds-goal-schedule">{schedule}</span>}</div>
          <Heading id={headingId} className="type-title">{name}</Heading>
        </div>
        <div className="ds-goal-heading-actions">
          <span className="ds-goal-status" role="status">{complete ? <Check size={16} aria-hidden="true" /> : <Circle size={14} aria-hidden="true" />}{!due ? "Day off" : complete ? "Complete" : value > 0 ? "In progress" : "Not started"}</span>
          {headingActions}
        </div>
      </header>
      {editor}
      <div className="ds-goal-body">
        <div className="ds-goal-completion">
          {trackingMethod === "count" && <div className="ds-goal-count">
            <p className="ds-goal-target"><span className="ds-goal-unit">{unit}</span></p>
            {children}
          </div>}
          {trackingMethod === "manual" && <div className="ds-goal-check-in">{children}<label htmlFor={checkInId}>{complete ? "Done for today" : "Mark as done"}</label></div>}
          {trackingMethod === "tasks" && <>
            <div className="ds-goal-task-progress"><span>{value} of {target} tasks done</span><progress aria-label={`${name} tasks completed`} value={Math.max(0, Math.min(value, target))} max={Math.max(1, target)} /></div>
            <div className="ds-goal-tasks" role="group" aria-label={`${name}: ${tasksLabel}`}>{tasks}</div>
          </>}
        </div>
        <div className="ds-goal-graph">{calendar ?? <CalendarHeatmap days={demoCalendar(value, target)} label={`${name} progress calendar`} unit={unit} color={color} compact />}</div>
      </div>
    </section>
  );

  return (
    <section className="ds-habit-chart" id={id} aria-labelledby={headingId} style={{ "--habit-color": color } as CSSProperties}>
      <header className="ds-habit-chart-heading">
        <div>
          <div className="ds-habit-title-row">
            <Heading id={headingId}>
              <span style={{ backgroundColor: color }} aria-hidden="true" />
              {name}
            </Heading>
            {headingActions}
          </div>
          <p>
            {method} · {schedule}
          </p>
        </div>
        {children}
      </header>
      {editor}
      <p className="ds-habit-chart-progress" aria-live="polite">
        <span>
          {due
            ? `${value} of ${target} ${unit}`
            : "A day off isn’t a missed day."}
        </span>
        <span>
          {!due
            ? "Not scheduled"
            : value >= target
              ? "Complete"
              : "In progress"}
        </span>
      </p>
      {calendar ?? (
        <CalendarHeatmap
          days={demoCalendar(value, target)}
          label={`${name} progress calendar`}
          unit={unit}
          color={color}
          compact
        />
      )}
      {tasks && (
        <details className="ds-task-accordion">
          <summary>
            <ListChecks size={20} aria-hidden="true" />
            <span className="ds-task-accordion-title">{tasksLabel}</span>
            <span className="ds-task-accordion-progress">
              <progress aria-label={`${name} tasks completed`} value={Math.max(0, Math.min(value, target))} max={Math.max(1, target)} />
              <span>{value} / {target}</span>
            </span>
            <ChevronDown className="ds-task-accordion-chevron" size={18} aria-hidden="true" />
          </summary>
          <div className="ds-task-accordion-content">{tasks}</div>
        </details>
      )}
    </section>
  );
}
