'use client';

import { useState } from 'react';
import { cn } from '@/lib/utils';
import { ExpressionPanel } from './ExpressionPanel';
import { GraphPanel } from './GraphPanel';

type Tab = 'calc' | 'graph';

export default function Calculator() {
  const [tab, setTab] = useState<Tab>('calc');

  return (
    <div className="flex flex-col gap-4">

      {/* Mobile tab switcher — hidden on lg+ */}
      <div className="flex lg:hidden glass rounded-xl p-1 gap-1">
        {(['calc', 'graph'] as Tab[]).map((t) => (
          <button
            key={t}
            onClick={() => setTab(t)}
            className={cn(
              'flex-1 py-2.5 rounded-lg text-sm font-medium capitalize transition-all',
              tab === t
                ? 'bg-primary text-primary-foreground shadow-sm'
                : 'text-muted-foreground hover:text-foreground'
            )}
          >
            {t === 'calc' ? 'Calculator' : 'Graph'}
          </button>
        ))}
      </div>

      {/* Main layout — side-by-side on lg, tabbed on mobile */}
      <div
        className="grid grid-cols-1 lg:grid-cols-5 gap-4"
        style={{ height: 'calc(100svh - 220px)', minHeight: '620px' }}
      >
        {/* Expression panel */}
        <div
          className={cn(
            'lg:col-span-2 overflow-hidden flex flex-col',
            tab !== 'calc' && 'hidden lg:flex'
          )}
        >
          <ExpressionPanel />
        </div>

        {/* Graph panel */}
        <div
          className={cn(
            'lg:col-span-3 overflow-hidden flex flex-col',
            tab !== 'graph' && 'hidden lg:flex'
          )}
        >
          <GraphPanel />
        </div>
      </div>

    </div>
  );
}