units-ui/components/converter/ConversionHistory.tsx

'use client';

import { useState, useEffect } from 'react';
import { History, Trash2, ArrowRight } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import {
  getHistory,
  clearHistory,
  type ConversionRecord,
} from '@/lib/storage';
import { getRelativeTime, formatNumber } from '@/lib/utils';
import { formatMeasureName } from '@/lib/units';

interface ConversionHistoryProps {
  onSelectConversion?: (record: ConversionRecord) => void;
}

export default function ConversionHistory({
  onSelectConversion,
}: ConversionHistoryProps) {
  const [history, setHistory] = useState<ConversionRecord[]>([]);
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    loadHistory();

    // Listen for storage changes
    const handleStorageChange = () => {
      loadHistory();
    };

    window.addEventListener('storage', handleStorageChange);
    // Also listen for custom event from same window
    window.addEventListener('historyUpdated', handleStorageChange);

    return () => {
      window.removeEventListener('storage', handleStorageChange);
      window.removeEventListener('historyUpdated', handleStorageChange);
    };
  }, []);

  const loadHistory = () => {
    setHistory(getHistory());
  };

  const handleClearHistory = () => {
    if (confirm('Clear all conversion history?')) {
      clearHistory();
      loadHistory();
    }
  };

  if (history.length === 0) {
    return null;
  }

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className="flex items-center gap-2">
            <History className="h-5 w-5" />
            Recent Conversions
          </CardTitle>
          <div className="flex items-center gap-2">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setIsOpen(!isOpen)}
            >
              {isOpen ? 'Hide' : `Show (${history.length})`}
            </Button>
            {history.length > 0 && (
              <Button
                variant="ghost"
                size="icon"
                onClick={handleClearHistory}
                className="h-8 w-8"
              >
                <Trash2 className="h-4 w-4" />
              </Button>
            )}
          </div>
        </div>
      </CardHeader>

      {isOpen && (
        <CardContent>
          <div className="space-y-2">
            {history.map((record) => (
              <button
                key={record.id}
                onClick={() => onSelectConversion?.(record)}
                className="w-full p-3 rounded-lg border hover:bg-accent transition-colors text-left"
              >
                <div className="flex items-center justify-between gap-4">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 text-sm font-medium">
                      <span className="truncate">
                        {formatNumber(record.from.value)} {record.from.unit}
                      </span>
                      <ArrowRight className="h-3 w-3 flex-shrink-0" />
                      <span className="truncate">
                        {formatNumber(record.to.value)} {record.to.unit}
                      </span>
                    </div>
                    <div className="flex items-center gap-2 text-xs text-muted-foreground mt-1">
                      <span>{formatMeasureName(record.measure as any)}</span>
                      <span>•</span>
                      <span>{getRelativeTime(record.timestamp)}</span>
                    </div>
                  </div>
                </div>
              </button>
            ))}
          </div>
        </CardContent>
      )}
    </Card>
  );
}