import React from 'react';
import { Card } from './ui/card';
import { Button } from './ui/button';
import { Progress } from './ui/progress';
import { Brain, Calendar, Download, Info } from 'lucide-react';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from './ui/tooltip';
import { Badge } from './ui/badge';

interface MemoryLineProps {
  progress: number;
}

export function MemoryLine({ progress }: MemoryLineProps) {
  const nextReview = progress < 25 ? 'T+7' : progress < 50 ? 'T+14' : progress < 75 ? 'T+30' : 'Complete';
  
  return (
    <Card className="p-4 space-y-3">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Brain className="h-4 w-4 text-purple-500" />
          <h4 className="text-sm">Memory Line</h4>
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <Button variant="ghost" size="icon" className="h-5 w-5">
                  <Info className="h-3 w-3" />
                </Button>
              </TooltipTrigger>
              <TooltipContent className="max-w-xs">
                <p className="text-sm">
                  Track your learning retention using spaced repetition. Regular reviews help solidify understanding!
                </p>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        </div>
        <Badge variant="outline" className="text-xs">
          {progress}%
        </Badge>
      </div>

      {/* Progress Bar with Milestones */}
      <div className="space-y-2">
        <div className="relative">
          <Progress value={progress} className="h-2" />
          
          {/* Milestone Markers */}
          <div className="absolute top-0 left-0 w-full h-2 flex justify-between pointer-events-none">
            {[0, 25, 50, 75, 100].map((milestone) => (
              <div
                key={milestone}
                className={`
                  w-3 h-3 rounded-full border-2 -mt-0.5
                  ${progress >= milestone 
                    ? 'bg-primary border-primary' 
                    : 'bg-background border-border'
                  }
                `}
              />
            ))}
          </div>
        </div>

        {/* Milestone Labels */}
        <div className="flex justify-between text-xs text-muted-foreground">
          <span>T+0</span>
          <span>T+7</span>
          <span>T+14</span>
          <span>T+30</span>
          <span>Done</span>
        </div>
      </div>

      {/* Actions */}
      <div className="flex items-center gap-2">
        <Button variant="outline" size="sm" className="flex-1 gap-2">
          <Calendar className="h-3 w-3" />
          Next: {nextReview}
        </Button>
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button variant="ghost" size="sm" className="gap-2">
                <Download className="h-3 w-3" />
                Report
              </Button>
            </TooltipTrigger>
            <TooltipContent>
              <p>Download your learning progress report</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      </div>

      {/* Review Explanation */}
      <div className="pt-2 border-t border-border">
        <p className="text-xs text-muted-foreground">
          Based on spaced repetition for optimal retention
        </p>
      </div>
    </Card>
  );
}