import { Redo2, RotateCcw, Undo2 } from 'lucide-react';
import React from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { useUndoRedo } from '@/hooks/useUndoRedo';

export const UndoRedoDemo = () => {
  const { state, setState, undo, redo, canUndo, canRedo, past, future } = useUndoRedo(
    { text: 'Merhaba Dünya', color: '#000000' },
    { maxHistory: 10, debounceMs: 500 }
  );

  return (
    <div className="p-8 space-y-6">
      <Card className="w-full max-w-2xl mx-auto">
        <CardHeader>
          <CardTitle>Undo/Redo Hook Demo</CardTitle>
          <CardDescription>
            Değişiklikler 500ms sonra geçmişe kaydedilir.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex gap-2">
            <Button 
              variant="outline" 
              onClick={undo} 
              disabled={!canUndo}
              className="flex items-center gap-2"
            >
              <Undo2 className="w-4 h-4" /> Geri Al
            </Button>
            <Button 
              variant="outline" 
              onClick={redo} 
              disabled={!canRedo}
              className="flex items-center gap-2"
            >
              <Redo2 className="w-4 h-4" /> İleri Al
            </Button>
          </div>

          <div className="space-y-2">
            <label className="text-sm font-medium">Metin</label>
            <Input 
              value={state.text} 
              onChange={(e) => setState({ ...state, text: e.target.value })} 
              placeholder="Bir şeyler yazın..."
            />
          </div>

          <div className="space-y-2">
            <label className="text-sm font-medium">Renk</label>
            <Input 
              type="color"
              value={state.color} 
              onChange={(e) => setState({ ...state, color: e.target.value })} 
              className="h-10 w-20"
            />
          </div>

          <div className="mt-6 p-4 bg-muted rounded-lg">
            <h3 className="font-semibold mb-2">Mevcut Durum:</h3>
            <pre className="text-xs">{JSON.stringify(state, null, 2)}</pre>
            
            <div className="mt-4 grid grid-cols-2 gap-4">
              <div>
                <h4 className="text-xs font-bold uppercase text-muted-foreground">Geçmiş ({past.length})</h4>
                <ul className="text-[10px] list-disc list-inside">
                  {past.map((p, i) => (
                    <li key={i} className="truncate">{JSON.stringify(p)}</li>
                  ))}
                </ul>
              </div>
              <div>
                <h4 className="text-xs font-bold uppercase text-muted-foreground">Gelecek ({future.length})</h4>
                <ul className="text-[10px] list-disc list-inside">
                  {future.map((f, i) => (
                    <li key={i} className="truncate">{JSON.stringify(f)}</li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};
