'use client';

import { useState, useEffect } from 'react';
import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { RefreshCw } from 'lucide-react';
import { numberingApi, NumberSequence } from '@/lib/api/numbering';

export function SequenceViewer() {
  const [sequences, setSequences] = useState<NumberSequence[]>([]);
  const [search, setSearch] = useState('');
  const [loading, setLoading] = useState(false);

  const fetchSequences = async () => {
    setLoading(true);
    try {
        const data = await numberingApi.getSequences();
        setSequences(data);
    } finally {
        setLoading(false);
    }
  };

  useEffect(() => {
    fetchSequences();
  }, []);

  const filteredSequences = sequences.filter(s =>
      s.year.toString().includes(search) ||
      s.organization_code?.toLowerCase().includes(search.toLowerCase()) ||
      s.discipline_code?.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <Card className="p-6">
      <div className="flex justify-between items-center mb-4">
        <h3 className="text-lg font-semibold">Number Sequences</h3>
        <Button variant="outline" size="sm" onClick={fetchSequences} disabled={loading}>
          <RefreshCw className={`mr-2 h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
          Refresh
        </Button>
      </div>

      <div className="mb-4">
        <Input
          placeholder="Search by year, organization..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
      </div>

      <div className="space-y-2">
        {filteredSequences.length === 0 && (
            <div className="text-center text-muted-foreground py-4">No sequences found</div>
        )}
        {filteredSequences.map((seq) => (
          <div
            key={seq.sequence_id}
            className="flex items-center justify-between p-3 bg-slate-50 dark:bg-slate-900 rounded border"
          >
            <div>
              <div className="flex items-center gap-2 mb-1">
                <span className="font-medium">Year {seq.year}</span>
                {seq.organization_code && (
                  <Badge>{seq.organization_code}</Badge>
                )}
                {seq.discipline_code && (
                  <Badge variant="outline">{seq.discipline_code}</Badge>
                )}
              </div>
              <div className="text-sm text-muted-foreground">
                <span className="text-foreground font-medium">Current: {seq.current_number}</span> | Last Generated:{' '}
                <span className="font-mono">{seq.last_generated_number}</span>
              </div>
            </div>
            <div className="text-sm text-gray-500">
              Updated {new Date(seq.updated_at).toLocaleDateString()}
            </div>
          </div>
        ))}
      </div>
    </Card>
  );
}