kit-ui/components/calculate/GraphPanel.tsx

'use client';

import { Plus, Eye, EyeOff, Trash2 } from 'lucide-react';
import { useCalculateStore } from '@/lib/calculate/store';
import { cn } from '@/lib/utils';
import GraphCanvas from './GraphCanvas';

export function GraphPanel() {
  const {
    graphFunctions,
    variables,
    addGraphFunction,
    updateGraphFunction,
    removeGraphFunction,
  } = useCalculateStore();

  return (
    <div className="flex flex-col gap-3 h-full min-h-0">

      {/* ── Function list ────────────────────────────────────── */}
      <div className="glass rounded-xl p-3 shrink-0">
        <div className="flex items-center justify-between mb-3">
          <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
            Functions  <span className="text-muted-foreground/40 normal-case font-normal">— use x as variable</span>
          </span>
          <button
            onClick={addGraphFunction}
            disabled={graphFunctions.length >= 8}
            className="flex items-center gap-1 text-xs text-muted-foreground hover:text-primary transition-colors disabled:opacity-30"
          >
            <Plus className="w-3.5 h-3.5" /> Add
          </button>
        </div>

        <div className="space-y-2">
          {graphFunctions.map((fn, i) => (
            <div key={fn.id} className="flex items-center gap-2">

              {/* Color swatch / color picker */}
              <div className="relative shrink-0 w-4 h-4">
                <div
                  className="w-4 h-4 rounded-full ring-1 ring-white/15 cursor-pointer"
                  style={{ background: fn.color }}
                />
                <input
                  type="color"
                  value={fn.color}
                  onChange={(e) => updateGraphFunction(fn.id, { color: e.target.value })}
                  className="absolute inset-0 opacity-0 cursor-pointer w-full h-full"
                  title="Change color"
                />
              </div>

              {/* Index label */}
              <span
                className="text-xs font-mono shrink-0 w-6"
                style={{ color: fn.visible ? fn.color : 'rgba(161,161,170,0.4)' }}
              >
                f{i + 1}
              </span>

              {/* Expression input */}
              <input
                value={fn.expression}
                onChange={(e) => updateGraphFunction(fn.id, { expression: e.target.value })}
                placeholder={i === 0 ? 'sin(x)' : i === 1 ? 'x^2 / 4' : 'f(x)…'}
                className={cn(
                  'flex-1 min-w-0 bg-transparent border border-border/35 rounded px-2 py-1',
                  'text-sm font-mono outline-none transition-colors',
                  'placeholder:text-muted-foreground/30',
                  'focus:border-primary/50',
                  !fn.visible && 'opacity-40'
                )}
              />

              {/* Visibility toggle */}
              <button
                onClick={() => updateGraphFunction(fn.id, { visible: !fn.visible })}
                className={cn(
                  'shrink-0 transition-colors',
                  fn.visible
                    ? 'text-muted-foreground hover:text-foreground'
                    : 'text-muted-foreground/25 hover:text-muted-foreground'
                )}
                title={fn.visible ? 'Hide' : 'Show'}
              >
                {fn.visible ? <Eye className="w-3.5 h-3.5" /> : <EyeOff className="w-3.5 h-3.5" />}
              </button>

              {/* Delete */}
              {graphFunctions.length > 1 && (
                <button
                  onClick={() => removeGraphFunction(fn.id)}
                  className="shrink-0 text-muted-foreground/30 hover:text-destructive transition-colors"
                  title="Remove"
                >
                  <Trash2 className="w-3.5 h-3.5" />
                </button>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* ── Canvas ───────────────────────────────────────────── */}
      <div className="glass rounded-xl overflow-hidden flex-1 min-h-0">
        <GraphCanvas functions={graphFunctions} variables={variables} />
      </div>

      {/* ── Hint bar ─────────────────────────────────────────── */}
      <p className="text-[10px] text-muted-foreground/35 text-center shrink-0 pb-1">
        Drag to pan &nbsp;·&nbsp; Scroll to zoom &nbsp;·&nbsp; Hover for coordinates
      </p>

    </div>
  );
}