import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { Card } from "../../ui";
import { formatDate } from "../../utils/formatters";

/** The logged-in user's resolved work plan for today (see GET /api/admin/dashboard). */
export interface TodayPlan {
  shift_date: string;
  category: string;
  category_label: string;
  category_color: string | null;
  project_id: number | null;
  project_number: string | null;
  project_name: string | null;
  note: string;
  source: "entry" | "override";
  rangeFrom: string | null;
  rangeTo: string | null;
}

function projectLabel(p: TodayPlan): string {
  const parts = [p.project_number, p.project_name].filter(Boolean);
  return parts.length > 0 ? parts.join(" — ") : "Bez projektu";
}

/**
 * "Vaše dnešní zařazení" — shows the logged-in user's work-plan entry for today
 * (category + project/site + note, with a range badge when the day is part of a
 * multi-day range). `plan === null` = the user has plan access but nothing is
 * scheduled today (muted empty state). Rendered near the clock-in on the
 * dashboard; the caller gates it on the plan permission.
 */
export default function DashTodayPlan({ plan }: { plan: TodayPlan | null }) {
  const color = plan?.category_color || "var(--mui-palette-primary-main)";
  return (
    <Card sx={{ mb: 3 }}>
      <Typography
        variant="subtitle2"
        sx={{ mb: 1.5, fontWeight: 600, color: "text.secondary" }}
      >
        Vaše dnešní zařazení
      </Typography>

      {plan ? (
        <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              gap: 1,
              flexWrap: "wrap",
            }}
          >
            <Box
              sx={{
                display: "inline-flex",
                alignItems: "center",
                gap: 0.75,
                px: 1.25,
                py: 0.5,
                borderRadius: 999,
                border: 1,
                borderColor: "divider",
                bgcolor: `color-mix(in srgb, ${color} 12%, transparent)`,
              }}
            >
              <Box
                sx={{
                  width: 10,
                  height: 10,
                  borderRadius: "50%",
                  bgcolor: color,
                  flexShrink: 0,
                }}
              />
              <Typography
                component="span"
                sx={{ fontWeight: 700, fontSize: "0.8rem" }}
              >
                {plan.category_label}
              </Typography>
            </Box>
            {plan.rangeFrom &&
              plan.rangeTo &&
              plan.rangeFrom !== plan.rangeTo && (
                <Typography variant="caption" color="text.secondary">
                  součást rozsahu {formatDate(plan.rangeFrom)} –{" "}
                  {formatDate(plan.rangeTo)}
                </Typography>
              )}
          </Box>

          <Typography variant="h6" sx={{ lineHeight: 1.25 }}>
            {projectLabel(plan)}
          </Typography>

          {plan.note && (
            <Typography variant="body2" color="text.secondary">
              {plan.note}
            </Typography>
          )}
        </Box>
      ) : (
        <Typography variant="body2" color="text.secondary">
          Pro dnešek nemáte naplánováno.
        </Typography>
      )}
    </Card>
  );
}