// Projekt & initiativ — data + vy
const { ResponsiveContainer: RC2, RadialBarChart: RBC, RadialBar: RB, PolarAngleAxis: PAA } = Recharts;

const PROJECTS_DATA = {
  accomplishments: [
    {
      icon: "check",
      title: "Energirenovering på Bulevarden 22 avslutad",
      body: "Stam- och fönsterrenovering klar 28 dagar före tidsplan. Total slutkostnad 412 000 € — 7 % under budget. Beräknad energibesparing 18 %.",
    },
    {
      icon: "check",
      title: "Nordea-lånet refinansierat — sparar 140 000 €/år",
      body: "Räntan sänkt från 4,3 % till 3,4 %. Likviditeten på 140 000 €/år kan allokeras till strategiska initiativ eller utökad utdelning.",
    },
    {
      icon: "file-text",
      title: "Q1-rapport godkänd av styrelsen",
      body: "Rapport och 5-årsplan presenterad och godkänd 14 april. Inga ändringsförslag — fokus förblir avkastning över 4 % och 95 % uthyrning.",
    },
    {
      icon: "users",
      title: "Stipendiekommittén utökad med två externa ledamöter",
      body: "Två nya bedömare med forskarbakgrund (Helsingfors universitet & Åbo Akademi) tillträder inför höstutdelningen. Stärker beslutskapaciteten med +31 % ansökningar.",
    },
  ],

  risks: [
    {
      severity: "Hög",
      title: "Tehtaankatu-renoveringen försenad 14 dagar",
      body: "Asbest påträffats i två schakt. Stamrenoveringen ligger 14 dagar efter plan och Q3-budgeten hotas med ~95 000 € tillkommande arbeten. Inflyttningsdatum 15 sep riskerar förskjutas till oktober.",
      recommendation: "Eskalera till styrelseutskottet för Q3-budgetrevidering före 15 juni. Förbered hyresgästkommunikation om reservboende vid behov.",
    },
    {
      severity: "Hög",
      title: "Stipendieprocessen saknar kapacitet inför hösten",
      body: "412 ansökningar mottagna — 31 % fler än 2024. Med nuvarande bemanning (1,5 ÅTV) hinner kommittén inte behandla alla före midsommarmötet 19 juni. Risk för försenad utdelning.",
      recommendation: "Aktivera de två nya externa ledamöterna omedelbart och fördela kategorierna 'Forskning' och 'Kultur' parallellt. Senarelägg granskning av återrapporter till augusti.",
    },
    {
      severity: "Medium",
      title: "Förvaltningschefens belastning toppar i augusti",
      body: "Anna Niemelä är direkt involverad i tre parallella spår i aug–sep: Tehtaankatu-slutbesiktning, Tammerfors-due diligence och höstmötesförberedelser. Workload-data visar 14 h övertid/v under v.34–v.36.",
      recommendation: "Klargör om Petri Salonen kan ta utökat ansvar för Tammerfors-due diligence under v.34–v.36. Skjut icke-kritiska uppgifter (ESG-rapport till sept).",
    },
  ],

  flagships: [
    {
      name: "Tehtaankatu-renovering",
      status: "Risk",
      progress: 38,
      summary: "Stamrenovering av 24 lägenheter pågår — asbestsanering tillkommer.",
      nextMilestone: "Asbestsanering slutförd",
      nextDate: "21 aug 2026",
      lead: "Petri Salonen",
      track: "Förvaltning",
    },
    {
      name: "Diversifiering Tammerfors",
      status: "I fas",
      progress: 22,
      summary: "Förvärv av första fastighet utanför Helsingfors — due diligence pågår.",
      nextMilestone: "DD-rapport klar",
      nextDate: "11 sep 2026",
      lead: "Johan Westerlund",
      track: "Strategi",
    },
    {
      name: "Höstens stipendieutdelning",
      status: "I fas",
      progress: 64,
      summary: "412 ansökningar under bedömning — beslut före höstmötet 24 september.",
      nextMilestone: "Kommittébeslut",
      nextDate: "19 jun 2026",
      lead: "Maria Holmqvist",
      track: "Samhälle",
    },
  ],

  // Milstolpar — månadsraden ger en överblickbar timeline
  // type: renovation | strategy | grant | report | comm
  milestones: [
    {
      month: "Maj",
      quiet: true,
      events: [{ wk: "v.21", label: "Q1-rapport publicerad", type: "report" }],
    },
    {
      month: "Jun",
      events: [
        { wk: "v.24", label: "Stipendiekommitté", type: "grant" },
        { wk: "v.25", label: "Midsommarmöte", type: "comm" },
      ],
    },
    {
      month: "Jul",
      quiet: true,
    },
    {
      month: "Aug",
      tag: "Intensiv period",
      tone: "warning",
      events: [
        { wk: "v.34", label: "Asbestsanering slut", type: "renovation" },
        { wk: "v.34", label: "Tammerfors DD-möte", type: "strategy" },
        { wk: "v.35", label: "Höstkommunikation startar", type: "comm" },
      ],
    },
    {
      month: "Sep",
      tag: "Hög belastning",
      tone: "danger",
      events: [
        { wk: "v.37", label: "Tehtaankatu inflyttning", type: "renovation" },
        { wk: "v.37", label: "DD-rapport klar", type: "strategy" },
        { wk: "v.38", label: "Stipendier utlysta", type: "grant" },
        { wk: "v.38", label: "ESG-rapport publicerad", type: "report" },
        { wk: "v.39", label: "Höstmöte styrelsen", type: "comm" },
        { wk: "v.39", label: "Q3-rapport", type: "report" },
      ],
    },
    {
      month: "Okt",
      events: [
        { wk: "v.42", label: "Tammerfors signering", type: "strategy" },
      ],
    },
    {
      month: "Nov",
      events: [
        { wk: "v.46", label: "Strategiplan 2027 utkast", type: "strategy" },
      ],
    },
    {
      month: "Dec",
      quiet: true,
      events: [{ wk: "v.51", label: "Bokslutsförberedelser", type: "report" }],
    },
  ],

  alignment: [
    {
      project: "Tehtaankatu-renovering",
      score: 91,
      linked: 10,
      total: 11,
      tracks: ["Förvaltning"],
      needs: ["Avkastning över 4 %", "Energieffektivisering"],
    },
    {
      project: "Diversifiering Tammerfors",
      score: 87,
      linked: 13,
      total: 15,
      tracks: ["Strategi"],
      needs: ["Geografisk diversifiering", "Långsiktig avkastning"],
    },
    {
      project: "Stipendieutdelning hösten",
      score: 73,
      linked: 11,
      total: 15,
      tracks: ["Samhälle"],
      needs: ["Forskningsstöd", "Kulturarbete"],
    },
  ],
};

// === Helpers ===
const MILESTONE_TYPE = {
  renovation: { label: "Renovering" },
  strategy:   { label: "Strategi" },
  grant:      { label: "Stipendier" },
  report:     { label: "Rapport" },
  comm:       { label: "Kommunikation" },
};

// === Sektionsrubrik ===
function SectionHeader({ icon, label, subtitle, action }) {
  return (
    <div className="flex items-end justify-between mb-4 mt-1">
      <div className="flex items-baseline gap-2 flex-wrap">
        <h3 className="text-[18px] font-semibold text-zinc-900 tracking-tight">{label}</h3>
        {subtitle && <span className="text-[13px] text-zinc-400">{subtitle}</span>}
      </div>
      {action}
    </div>
  );
}

// === Header för vyn ===
function ProjectsHeader() {
  return (
    <div className="flex items-end justify-between">
      <div>
        <h2 className="text-[22px] font-semibold text-zinc-900 tracking-tight">Projekt & initiativ</h2>
        <p className="text-[13px] text-zinc-500 mt-0.5">Maj — december 2026 · 3 flaggskeppsprojekt · 11 aktiva initiativ</p>
      </div>
    </div>
  );
}

// === Senaste månaden ===
function Accomplishments() {
  window.useNsScheme();
  const accent = window.nsTierHex("high", "text");
  return (
    <Card className="overflow-hidden">
      <div className="divide-y divide-zinc-100">
        {PROJECTS_DATA.accomplishments.map((a, i) => (
          <div key={i} className="flex items-start gap-3.5 px-5 py-3.5">
            <div className="w-7 h-7 rounded-full bg-zinc-100 flex items-center justify-center flex-shrink-0 mt-0.5" style={{ color: accent }}>
              <Icon name={a.icon} className="w-3.5 h-3.5" strokeWidth={2.25}/>
            </div>
            <div className="min-w-0 flex-1">
              <h4 className="text-[13.5px] font-semibold text-zinc-900 tracking-tight leading-snug">{a.title}</h4>
              <p className="text-[12.5px] text-zinc-600 mt-1 leading-relaxed">{a.body}</p>
            </div>
          </div>
        ))}
      </div>
    </Card>
  );
}

// === Riskkort ===
function RiskGrid() {
  const scheme = window.useNsScheme();
  const sevMap = scheme === "ryg"
    ? { "Hög": "#f87171", "Medium": "#fbbf24" }
    : { "Hög": "#475569", "Medium": "#94a3b8" };
  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
      {PROJECTS_DATA.risks.map((r, i) => {
        const color = sevMap[r.severity];
        return (
          <Card key={i} className="overflow-hidden relative">
            <div className="absolute top-0 left-0 right-0 h-0.5" style={{ background: color }}/>
            <div className="px-5 pt-4 pb-4">
              <div className="flex items-center justify-between mb-3">
                <span className="inline-flex items-center gap-1.5 px-1.5 py-0.5 rounded-md text-[10.5px] font-medium border border-zinc-200 bg-white text-zinc-700 whitespace-nowrap">
                  <span className="w-1.5 h-1.5 rounded-full" style={{ background: color }}/>
                  {r.severity} risk
                </span>
                <span className="text-[10.5px] text-zinc-400 font-mono">Risk {i + 1}/3</span>
              </div>
              <h4 className="text-[14px] font-semibold text-zinc-900 tracking-tight leading-snug mb-2">{r.title}</h4>
              <p className="text-[12.5px] text-zinc-600 leading-relaxed">{r.body}</p>
              <div className="mt-4 pt-3 border-t border-zinc-100">
                <div className="text-[10.5px] font-semibold text-zinc-400 uppercase tracking-wider mb-1.5">Rekommendation</div>
                <p className="text-[12.5px] text-zinc-700 leading-relaxed">{r.recommendation}</p>
              </div>
            </div>
          </Card>
        );
      })}
    </div>
  );
}

// === Flaggskepp ===
function FlagshipGrid() {
  const scheme = window.useNsScheme();
  const statusMap = scheme === "ryg"
    ? { "I fas": "#4ade80", "Risk": "#fbbf24" }
    : { "I fas": "#475569", "Risk": "#94a3b8" };
  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
      {PROJECTS_DATA.flagships.map((f, i) => {
        const color = statusMap[f.status];
        return (
          <Card key={i} className="overflow-hidden">
            <div className="px-5 pt-4 pb-5">
              <div className="flex items-start justify-between gap-2 mb-3">
                <h4 className="text-[14.5px] font-semibold text-zinc-900 tracking-tight leading-snug">{f.name}</h4>
                <span className="inline-flex items-center gap-1.5 px-1.5 py-0.5 rounded-md text-[10.5px] font-medium border border-zinc-200 bg-white text-zinc-700 whitespace-nowrap flex-shrink-0">
                  <span className="w-1.5 h-1.5 rounded-full" style={{ background: color }}/>
                  {f.status}
                </span>
              </div>

              {/* Progress */}
              <div className="mb-3">
                <div className="flex items-center justify-between text-[11.5px] mb-1.5">
                  <span className="text-zinc-500 font-medium">Framsteg</span>
                  <span className="font-mono text-zinc-900 font-semibold">{f.progress} %</span>
                </div>
                <div className="h-1.5 bg-zinc-100 rounded-full overflow-hidden">
                  <div className="h-full rounded-full transition-all" style={{ width: `${f.progress}%`, background: color }}/>
                </div>
              </div>

              <p className="text-[12.5px] text-zinc-600 italic leading-relaxed pl-3 border-l-2 border-zinc-200 my-4">
                {f.summary}
              </p>

              {/* Next milestone */}
              <div className="mt-4 pt-3 border-t border-zinc-100 grid grid-cols-2 gap-3">
                <div>
                  <div className="text-[10.5px] font-semibold text-zinc-400 uppercase tracking-wider mb-1">Nästa milstolpe</div>
                  <div className="text-[12.5px] font-semibold text-zinc-900 leading-tight">{f.nextMilestone}</div>
                  <div className="text-[11.5px] text-zinc-500 font-mono mt-0.5">{f.nextDate}</div>
                </div>
                <div>
                  <div className="text-[10.5px] font-semibold text-zinc-400 uppercase tracking-wider mb-1">Projektledare</div>
                  <div className="text-[12.5px] font-semibold text-zinc-900 leading-tight">{f.lead}</div>
                  <Badge variant="slate" className="mt-1">{f.track}</Badge>
                </div>
              </div>
            </div>
          </Card>
        );
      })}
    </div>
  );
}

// === Milstolpe-timeline ===
function MilestoneTimeline() {
  const toneRow = {
    warning: "bg-zinc-50",
    danger:  "bg-zinc-100/70",
  };
  return (
    <Card className="overflow-hidden">
      <div className="divide-y divide-zinc-100">
        {PROJECTS_DATA.milestones.map((m, i) => {
          const eventCount = (m.events || []).length;
          const isQuiet = !!m.quiet && eventCount === 0;
          const rowCls = m.tone ? toneRow[m.tone] : "";
          return (
            <div key={i} className={`flex items-start gap-4 px-5 ${isQuiet ? "py-2.5" : "py-3.5"} ${rowCls}`}>
              <div className="w-32 flex-shrink-0">
                <div className="text-[13px] font-semibold tracking-tight text-zinc-900">
                  {m.month}
                </div>
                {m.tag && (
                  <div className="text-[10.5px] font-medium mt-0.5 text-zinc-500 flex items-center gap-1 whitespace-nowrap">
                    <Icon name="alert-circle" className="w-2.5 h-2.5"/>
                    {m.tag}
                  </div>
                )}
                {isQuiet && <div className="text-[10.5px] text-zinc-400 mt-0.5">Lugnt</div>}
              </div>
              <div className="flex-1 min-w-0">
                {isQuiet ? (
                  <div className="text-[12px] text-zinc-400 italic">Inga större milstolpar planerade</div>
                ) : (
                  <div className="flex flex-wrap gap-2">
                    {(m.events || []).map((e, j) => (
                      <div key={j} className="px-2.5 py-1.5 rounded-md border border-zinc-200 bg-white">
                        <div className="text-[9.5px] font-semibold text-zinc-400 uppercase tracking-wider">{MILESTONE_TYPE[e.type].label}</div>
                        <div className="text-[12px] font-medium text-zinc-800 mt-0.5">{e.label}</div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
              <div className="flex-shrink-0">
                {eventCount > 0 ? (
                  <span className="w-6 h-6 rounded-full flex items-center justify-center text-[10.5px] font-semibold tabular-nums bg-zinc-100 text-zinc-600">{eventCount}</span>
                ) : (
                  <span className="w-6 h-6 rounded-full bg-zinc-50 text-zinc-300 flex items-center justify-center">
                    <Icon name="minus" className="w-3 h-3"/>
                  </span>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </Card>
  );
}

// === Strategisk alignment ===
function AlignmentGrid() {
  window.useNsScheme();
  const scoreColor = score => {
    const tier = score >= 85 ? "high" : score >= 70 ? "mid" : "low";
    const fill = window.nsTierHex(tier, "fill");
    return { ring: fill, text: window.nsTierHex(tier, "text"), bar: fill };
  };
  const checkColor = window.nsTierHex("high", "text");
  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
      {PROJECTS_DATA.alignment.map((a, i) => {
        const c = scoreColor(a.score);
        const circumference = 2 * Math.PI * 32;
        return (
          <Card key={i} className="overflow-hidden">
            <div className="px-5 pt-4 pb-5">
              <div className="flex items-start justify-between gap-2 mb-1">
                <h4 className="text-[14px] font-semibold text-zinc-900 tracking-tight leading-snug">{a.project}</h4>
                <div className="flex items-center gap-1 flex-shrink-0">
                  {a.tracks.map(t => (
                    <Badge key={t} variant="slate">{t}</Badge>
                  ))}
                </div>
              </div>

              <div className="flex items-center gap-5 my-4">
                <div className="relative w-[88px] h-[88px] flex-shrink-0">
                  <svg viewBox="0 0 80 80" className="w-full h-full -rotate-90">
                    <circle cx="40" cy="40" r="32" fill="none" stroke="#e4e4e7" strokeWidth="7"/>
                    <circle
                      cx="40" cy="40" r="32"
                      fill="none"
                      stroke={c.ring}
                      strokeWidth="7"
                      strokeLinecap="round"
                      strokeDasharray={circumference}
                      strokeDashoffset={circumference * (1 - a.score / 100)}
                      style={{ transition: "stroke-dashoffset 0.6s ease" }}
                    />
                  </svg>
                  <div className="absolute inset-0 flex flex-col items-center justify-center">
                    <span className="text-[22px] font-semibold tabular-nums leading-none" style={{ color: c.text }}>{a.score}</span>
                    <span className="text-[9.5px] font-medium text-zinc-400 uppercase tracking-wider mt-0.5">poäng</span>
                  </div>
                </div>
                <div className="flex-1 min-w-0">
                  <div className="text-[10.5px] font-semibold text-zinc-400 uppercase tracking-wider mb-1">Aktiviteter kopplade</div>
                  <div className="flex items-baseline gap-1">
                    <span className="text-[20px] font-semibold text-zinc-900 tabular-nums leading-none">{a.linked}</span>
                    <span className="text-[13px] text-zinc-400 tabular-nums">av {a.total}</span>
                  </div>
                  <div className="h-1 bg-zinc-100 rounded-full overflow-hidden mt-2">
                    <div className="h-full rounded-full" style={{ width: `${(a.linked / a.total) * 100}%`, background: c.bar }}/>
                  </div>
                </div>
              </div>

              <div className="pt-3 border-t border-zinc-100">
                <div className="text-[10.5px] font-semibold text-zinc-400 uppercase tracking-wider mb-2">Kopplade behov</div>
                <div className="flex flex-wrap gap-1.5">
                  {a.needs.map(n => (
                    <span key={n} className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-zinc-50 border border-zinc-200 text-[11.5px] text-zinc-700">
                      <span className="flex" style={{ color: checkColor }}><Icon name="check" className="w-3 h-3" strokeWidth={2.5}/></span>
                      {n}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </Card>
        );
      })}
    </div>
  );
}

// === Huvudvyn ===
function ProjectsView() {
  return (
    <div className="space-y-8">
      <ProjectsHeader/>

      {/* Senaste månaden */}
      <section>
        <SectionHeader icon="check" label="Senaste månaden — vad vi åstadkommit" subtitle="april–maj 2026"/>
        <Accomplishments/>
      </section>

      {/* Risk */}
      <section>
        <SectionHeader
          icon="alert-circle"
          label="Riskanalys — Q3 2026"
          subtitle="3 punkter kräver beslut"
          action={<Button variant="ghost" size="sm"><Icon name="arrow-up-right" className="w-3.5 h-3.5"/>Visa alla</Button>}
        />
        <RiskGrid/>
      </section>

      {/* Flaggskepp */}
      <section>
        <SectionHeader icon="star" label="Flaggskepp" subtitle="3 prioriterade projekt"/>
        <FlagshipGrid/>
      </section>

      {/* Milstolpar */}
      <section>
        <SectionHeader icon="calendar" label="Milstolpar" subtitle="maj till december 2026"/>
        <MilestoneTimeline/>
      </section>

      {/* Strategisk alignment */}
      <section className="pb-12">
        <SectionHeader icon="trending-up" label="Strategisk alignment" subtitle="hur väl kopplar arbetet till strategin?"/>
        <AlignmentGrid/>
      </section>
    </div>
  );
}

window.ProjectsView = ProjectsView;

// === Kompakt widget för Översikt: Flaggskeppsprojekt ===
function WProjektFlaggskepp() {
  const statusMap = {
    "I fas": { badge: "positive", bar: "bg-slate-700" },
    "Risk":  { badge: "warning", bar: "bg-slate-400" },
  };
  return (
    <Card className="overflow-hidden group flex flex-col">
      <WidgetHeader
        title="Flaggskeppsprojekt"
        badge={`${PROJECTS_DATA.flagships.length} aktiva`}
        sub="Status och framsteg"
      />
      <div className="px-5 pb-5 space-y-3.5 pt-0.5">
        {PROJECTS_DATA.flagships.map((f, i) => {
          const s = statusMap[f.status];
          return (
            <div key={i}>
              <div className="flex items-center justify-between gap-2 mb-1.5">
                <span className="text-[12.5px] font-medium text-zinc-800 truncate">{f.name}</span>
                <div className="flex items-center gap-2 flex-shrink-0">
                  <Badge variant={s.badge}>{f.status}</Badge>
                  <span className="font-mono text-[12px] font-semibold text-zinc-900 tabular-nums">{f.progress} %</span>
                </div>
              </div>
              <div className="h-1.5 bg-zinc-100 rounded-full overflow-hidden">
                <div className={`h-full rounded-full ${s.bar}`} style={{ width: `${f.progress}%` }}/>
              </div>
            </div>
          );
        })}
      </div>
    </Card>
  );
}

// === Kompakt widget för Översikt: Risköversikt ===
function WProjektRisk() {
  const sevMap = {
    "Hög":    { dot: "bg-rose-500", badge: "danger" },
    "Medium": { dot: "bg-amber-500", badge: "warning" },
  };
  return (
    <Card className="overflow-hidden group flex flex-col">
      <WidgetHeader
        title="Aktiva risker"
        badge={`${PROJECTS_DATA.risks.length} st`}
        sub="Kräver beslut denna period"
      />
      <div className="px-5 pb-5 divide-y divide-zinc-100">
        {PROJECTS_DATA.risks.map((r, i) => {
          const sev = sevMap[r.severity];
          return (
            <div key={i} className="flex items-start gap-2.5 py-2.5 first:pt-0">
              <span className={`w-1.5 h-1.5 rounded-full mt-1.5 flex-shrink-0 ${sev.dot}`}/>
              <div className="min-w-0 flex-1">
                <div className="flex items-center justify-between gap-2">
                  <span className="text-[12.5px] font-medium text-zinc-800 truncate">{r.title}</span>
                  <Badge variant={sev.badge}>{r.severity}</Badge>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </Card>
  );
}

Object.assign(window, { WProjektFlaggskepp, WProjektRisk });