<script lang="ts">
  import {
    BarChart3,
    TrendingUp,
    Wheat,
    FlaskConical,
    Boxes,
    AlertTriangle,
    ClipboardCheck,
    FileText,
  } from 'lucide-svelte';
  import type { ComponentType } from 'svelte';

  type ReportId =
    | 'summary'
    | 'raw-material-costs'
    | 'mix-cost-summary'
    | 'product-pricing'
    | 'data-quality'
    | 'price-review';

  type ReportItem = {
    id: ReportId;
    label: string;
    description: string;
    icon: ComponentType;
    group: string;
  };

  const reports: ReportItem[] = [
    {
      id: 'summary',
      label: 'Overview',
      description: 'High-level snapshot of the current costing model.',
      icon: BarChart3,
      group: 'Overview',
    },
    {
      id: 'raw-material-costs',
      label: 'Raw Material Costs',
      description: 'Current prices, waste assumptions, and cost per kg for all tracked inputs.',
      icon: Wheat,
      group: 'Costing',
    },
    {
      id: 'mix-cost-summary',
      label: 'Mix Cost Summary',
      description: 'Per-mix cost per kg across the current mix master.',
      icon: FlaskConical,
      group: 'Costing',
    },
    {
      id: 'product-pricing',
      label: 'Product Pricing',
      description: 'Finished delivered cost and selling price outputs by product.',
      icon: Boxes,
      group: 'Costing',
    },
    {
      id: 'data-quality',
      label: 'Data Quality',
      description: 'Items with missing costs, unresolved warnings, or stale inputs.',
      icon: AlertTriangle,
      group: 'Quality',
    },
    {
      id: 'price-review',
      label: 'Price Review',
      description: 'Current vs proposed pricing status across all products.',
      icon: ClipboardCheck,
      group: 'Quality',
    },
  ];

  const groups = [...new Set(reports.map((r) => r.group))];

  let activeId = $state<ReportId>('summary');

  const activeReport = $derived(reports.find((r) => r.id === activeId) ?? reports[0]);
</script>

<div class="reporting-layout">
  <nav class="report-nav" aria-label="Report navigation">
    <p class="nav-section-label">Reporting</p>

    <div class="nav-identity">
      <div class="nav-avatar" aria-hidden="true">
        <TrendingUp size={16} strokeWidth={1.75} />
      </div>
      <div class="nav-identity-text">
        <p class="identity-name">Workspace reports</p>
        <p class="identity-role">Costing and quality views</p>
      </div>
    </div>

    {#each groups as group}
      <div class="nav-group">
        <p class="nav-group-label">{group}</p>
        {#each reports.filter((r) => r.group === group) as report}
          {@const Icon = report.icon}
          <button
            type="button"
            class="nav-item"
            class:active={activeId === report.id}
            onclick={() => (activeId = report.id)}
          >
            <span class="nav-icon"><Icon size={18} strokeWidth={1.75} /></span>
            <span>{report.label}</span>
          </button>
        {/each}
      </div>
    {/each}
  </nav>

  <div class="report-panel">
    {#if activeReport}
      {@const PanelIcon = activeReport.icon}
      <header class="panel-header">
        <div class="panel-header-icon" aria-hidden="true">
          <PanelIcon size={16} strokeWidth={1.75} />
        </div>
        <div>
          <p class="panel-eyebrow">{activeReport.group}</p>
          <h2>{activeReport.label}</h2>
          <p class="panel-description">{activeReport.description}</p>
        </div>
      </header>
    {/if}

    <div class="panel-body">
      {#if activeId === 'summary'}
        <div class="report-placeholder">
          <div class="placeholder-icon" aria-hidden="true">
            <BarChart3 size={32} strokeWidth={1.25} />
          </div>
          <strong>Overview report</strong>
          <span>A summary of raw material count, mix count, product pricing outputs, and open data quality issues will appear here.</span>
          <div class="placeholder-chips">
            <span class="chip">Raw Material Costs</span>
            <span class="chip">Mix Cost Summary</span>
            <span class="chip">Product Pricing</span>
            <span class="chip">Data Quality</span>
          </div>
        </div>

      {:else if activeId === 'raw-material-costs'}
        <div class="report-placeholder">
          <div class="placeholder-icon" aria-hidden="true">
            <Wheat size={32} strokeWidth={1.25} />
          </div>
          <strong>Raw Material Costs</strong>
          <span>Market value, waste percentage, cost per unit, and cost per kg for every tracked raw material will display here.</span>
          <div class="placeholder-table-preview">
            <div class="preview-header-row">
              <span>Raw Material</span><span>Market Value</span><span>Waste %</span><span>Cost / Kg</span>
            </div>
            {#each [1, 2, 3, 4] as _}
              <div class="preview-data-row">
                <div class="shimmer wide"></div>
                <div class="shimmer medium"></div>
                <div class="shimmer short"></div>
                <div class="shimmer medium"></div>
              </div>
            {/each}
          </div>
        </div>

      {:else if activeId === 'mix-cost-summary'}
        <div class="report-placeholder">
          <div class="placeholder-icon" aria-hidden="true">
            <FlaskConical size={32} strokeWidth={1.25} />
          </div>
          <strong>Mix Cost Summary</strong>
          <span>Total ingredients, total kg, total mix cost, and cost per kg for each mix in the current mix master will appear here.</span>
          <div class="placeholder-table-preview">
            <div class="preview-header-row">
              <span>Mix Name</span><span>Client</span><span>Ingredients</span><span>Cost / Kg</span>
            </div>
            {#each [1, 2, 3, 4] as _}
              <div class="preview-data-row">
                <div class="shimmer wide"></div>
                <div class="shimmer medium"></div>
                <div class="shimmer short"></div>
                <div class="shimmer medium"></div>
              </div>
            {/each}
          </div>
        </div>

      {:else if activeId === 'product-pricing'}
        <div class="report-placeholder">
          <div class="placeholder-icon" aria-hidden="true">
            <Boxes size={32} strokeWidth={1.25} />
          </div>
          <strong>Product Pricing Output</strong>
          <span>Cleaned product cost, process costs, packaging, freight, finished delivered cost, and selling price by product will appear here.</span>
          <div class="placeholder-table-preview">
            <div class="preview-header-row">
              <span>Product</span><span>Cleaned Cost</span><span>Delivered</span><span>Distributor</span>
            </div>
            {#each [1, 2, 3, 4] as _}
              <div class="preview-data-row">
                <div class="shimmer wide"></div>
                <div class="shimmer medium"></div>
                <div class="shimmer medium"></div>
                <div class="shimmer medium"></div>
              </div>
            {/each}
          </div>
        </div>

      {:else if activeId === 'data-quality'}
        <div class="report-placeholder">
          <div class="placeholder-icon warning" aria-hidden="true">
            <AlertTriangle size={32} strokeWidth={1.25} />
          </div>
          <strong>Data Quality Issues</strong>
          <span>Raw materials missing costs, mixes with unresolved warnings, and products with stale or missing inputs will be listed here.</span>
          <div class="placeholder-chips">
            <span class="chip warning">Missing prices</span>
            <span class="chip warning">Unresolved notes</span>
            <span class="chip warning">Zero quantities</span>
          </div>
        </div>

      {:else if activeId === 'price-review'}
        <div class="report-placeholder">
          <div class="placeholder-icon" aria-hidden="true">
            <ClipboardCheck size={32} strokeWidth={1.25} />
          </div>
          <strong>Price Review Status</strong>
          <span>Current vs proposed wholesale and distributor pricing, with review status and delta for each product line, will appear here.</span>
          <div class="placeholder-table-preview">
            <div class="preview-header-row">
              <span>Product</span><span>Current</span><span>Proposed</span><span>Status</span>
            </div>
            {#each [1, 2, 3, 4] as _}
              <div class="preview-data-row">
                <div class="shimmer wide"></div>
                <div class="shimmer medium"></div>
                <div class="shimmer medium"></div>
                <div class="shimmer short"></div>
              </div>
            {/each}
          </div>
        </div>
      {/if}
    </div>
  </div>
</div>

<style>
  .reporting-layout {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    align-items: stretch;
    min-height: calc(100vh - 8.5rem);
    max-height: calc(100vh - 8.5rem);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 1.15rem;
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .report-nav {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    height: 100%;
    min-height: calc(100vh - 8.5rem);
    padding: 1.1rem 0.85rem 0.85rem;
    background: var(--panel);
    border-right: 1px solid var(--line);
    overflow-y: auto;
  }

  .nav-section-label {
    margin: 0 0.55rem 0.3rem;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .nav-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.25rem 0.9rem;
    border-bottom: 1px solid var(--line);
  }

  .nav-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--green-deep);
    color: #fff;
  }

  .nav-identity-text {
    min-width: 0;
  }

  .identity-name {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .identity-role {
    margin: 0;
    font-size: 0.74rem;
    color: var(--muted);
  }

  .nav-group {
    display: grid;
    gap: 0.12rem;
    padding-top: 0.15rem;
  }

  .nav-group + .nav-group {
    padding-top: 0.7rem;
  }

  .nav-group-label {
    margin: 0.15rem 0.55rem 0.3rem;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.6rem 0.6rem;
    border: none;
    border-radius: 0.7rem;
    background: transparent;
    color: #3a4a41;
    font-size: 0.93rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
  }

  .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    color: #6d7d74;
    border-radius: 0.55rem;
    transition: color 140ms ease;
  }

  .nav-item:hover {
    background: var(--panel-soft);
    color: #304038;
  }

  .nav-item.active {
    background: var(--color-brand);
    color: #fff;
    font-weight: 600;
  }

  .nav-item:hover .nav-icon {
    color: #304038;
  }

  .nav-item.active .nav-icon {
    color: #fff;
  }

  .nav-item.active::before {
    content: '';
    position: absolute;
    left: -0.85rem;
    top: 0.45rem;
    bottom: 0.45rem;
    width: 3px;
    border-radius: 999px;
    background: var(--color-brand);
  }

  .report-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--panel);
    height: 100%;
    overflow: hidden;
  }

  .panel-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--line);
    background: var(--panel-soft);
  }

  .panel-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.72rem;
    background: var(--color-brand-tint);
    color: var(--color-brand);
    border: 1px solid color-mix(in srgb, var(--color-brand) 15%, transparent);
    margin-top: 0.15rem;
  }

  .panel-eyebrow {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .panel-header h2 {
    margin: 0.2rem 0 0.3rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
  }

  .panel-description {
    margin: 0;
    font-size: 0.84rem;
    color: var(--muted);
    line-height: 1.5;
  }

  .panel-body {
    flex: 1;
    min-height: 0;
    padding: 1.5rem;
    overflow-y: auto;
  }

  /* ── Report placeholders ───────────────────────────────────────── */

  .report-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 2.5rem 1.5rem 2rem;
    text-align: center;
  }

  .placeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: var(--color-brand-tint);
    color: var(--color-brand);
    border: 1px solid color-mix(in srgb, var(--color-brand) 15%, transparent);
    margin-bottom: 0.4rem;
  }

  .placeholder-icon.warning {
    background: #fff6e6;
    color: #b06a10;
    border-color: rgba(176, 106, 16, 0.2);
  }

  .report-placeholder strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
  }

  .report-placeholder span {
    max-width: 36rem;
    font-size: 0.87rem;
    color: var(--muted);
    line-height: 1.55;
  }

  .placeholder-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.75rem;
  }

  .chip {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.72rem;
    border-radius: 999px;
    background: var(--color-brand-tint);
    color: var(--color-brand);
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--color-brand) 12%, transparent);
  }

  .chip.warning {
    background: #fff6e6;
    color: #b06a10;
    border-color: rgba(176, 106, 16, 0.15);
  }

  /* ── Shimmer table preview ─────────────────────────────────────── */

  .placeholder-table-preview {
    width: 100%;
    max-width: 44rem;
    margin-top: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    overflow: hidden;
  }

  .preview-header-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 1rem;
    padding: 0.6rem 1rem;
    background: var(--panel-soft);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .preview-data-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0.72rem 1rem;
    border-bottom: 1px solid var(--line);
  }

  .preview-data-row:last-child {
    border-bottom: none;
  }

  .shimmer {
    height: 0.65rem;
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      var(--color-border) 25%,
      color-mix(in srgb, var(--color-border) 40%, white) 50%,
      var(--color-border) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.9s ease-in-out infinite;
  }

  .shimmer.short  { width: 45%; }
  .shimmer.medium { width: 70%; }
  .shimmer.wide   { width: 92%; }

  @keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* ── Responsive ────────────────────────────────────────────────── */

  @media (max-width: 860px) {
    .reporting-layout {
      grid-template-columns: 1fr;
      min-height: auto;
      max-height: none;
    }

    .report-nav {
      position: static;
      min-height: auto;
      height: auto;
      overflow: visible;
      border-right: none;
      border-bottom: 1px solid var(--line);
    }

    .nav-group {
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
      padding-top: 0;
    }

    .nav-group-label {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
    }

    .nav-item {
      width: auto;
    }
  }

  @media (max-width: 640px) {
    .panel-header {
      flex-direction: column;
    }

    .preview-header-row,
    .preview-data-row {
      grid-template-columns: 1fr 1fr;
    }

    .preview-header-row span:nth-child(n+3),
    .preview-data-row .shimmer:nth-child(n+3) {
      display: none;
    }
  }
</style>
