import React, { useState } from 'react';
import { 
  ChevronLeft, 
  Menu, 
  User, 
  Plus, 
  Grid, 
  List, 
  ArrowDownAZ, 
  Pin, 
  X, 
  Coffee, 
  Tablet, 
  Trash2, 
  Utensils, 
  Syringe,
  Timer
} from 'lucide-react';
import { Button } from "../ui/button";
import { cn } from "../ui/utils";

// Mock Data for Timers
const timersData = [
  {
    id: 1,
    title: 'Coffee - 2 hrs',
    subtitle: '1 min - Completes at 12:05 PM',
    totalTime: 7200, // seconds
    remainingTime: 0,
    status: 'expired',
    icon: Coffee,
  },
  {
    id: 2,
    title: 'Clean Tablet',
    subtitle: '1 hrs - Completes at 12:37 PM',
    totalTime: 3600,
    remainingTime: 237, // 3:57
    status: 'running',
    icon: Tablet,
  },
  {
    id: 3,
    title: 'Replace Sanitizer Towels',
    subtitle: '1 hrs - Completes at 12:37 PM',
    totalTime: 3600,
    remainingTime: 238, // 3:58
    status: 'running',
    icon: Trash2,
  },
  {
    id: 4,
    title: 'Take Out Trash',
    subtitle: '1 hrs - Completes at 01:03 PM',
    totalTime: 3600,
    remainingTime: 58, // 00:58
    status: 'running',
    icon: Trash2,
  },
  {
    id: 5,
    title: 'Change Utensils',
    subtitle: '1 hrs - Completes at 01:03 PM',
    totalTime: 3600,
    remainingTime: 58,
    status: 'running',
    icon: Utensils,
  },
  {
    id: 6,
    title: 'Sanitize Surfaces',
    subtitle: '1 hrs - Completes at 02:00 PM',
    totalTime: 3600,
    remainingTime: 2157,
    status: 'running',
    icon: Syringe,
  },
  {
    id: 7,
    title: 'Check Temperatures',
    subtitle: '1 hrs - Completes at 02:00 PM',
    totalTime: 3600,
    remainingTime: 2158,
    status: 'running',
    icon: Syringe,
  },
  {
    id: 8,
    title: 'Ranch 4 hrs',
    subtitle: '4 hrs - Completes at 04:04 PM',
    totalTime: 14400,
    remainingTime: 2158,
    status: 'running',
    icon: Syringe,
  },
];

function TimerCard({ timer }: { timer: typeof timersData[0] }) {
  // Calculate progress percentage for circle
  const progress = ((timer.totalTime - timer.remainingTime) / timer.totalTime) * 100;
  const isExpired = timer.remainingTime === 0;
  
  // Format remaining time MM:SS or similar
  const formatTime = (seconds: number) => {
    if (seconds <= 0) return "0s";
    const m = Math.floor(seconds / 60);
    const s = seconds % 60;
    return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
  };

  return (
    <div className="bg-gray-200 rounded-xl p-4 flex flex-col items-center relative shadow-sm h-[280px]">
      <div className="text-center mb-2">
        <h3 className="text-lg font-medium text-gray-800 leading-tight">{timer.title}</h3>
        <p className="text-xs text-gray-500 mt-1">{timer.subtitle}</p>
      </div>

      {/* Timer Circle */}
      <div className="relative w-32 h-32 my-auto flex items-center justify-center">
        {/* Background Circle */}
        <svg className="w-full h-full transform -rotate-90">
          <circle
            cx="64"
            cy="64"
            r="56"
            stroke="white"
            strokeWidth="12"
            fill="transparent"
          />
          {/* Progress Circle */}
          <circle
            cx="64"
            cy="64"
            r="56"
            stroke={isExpired ? "#ef4444" : "#3b82f6"} // red-500 or blue-500
            strokeWidth="12"
            fill="transparent"
            strokeDasharray={351.86} // 2 * pi * r
            strokeDashoffset={isExpired ? 0 : 351.86 * (progress / 100)} // Inverse logic for countdown visual? Usually full then empty.
            // Let's assume the blue part represents remaining time or elapsed? 
            // In screenshot, blue circle is mostly complete for 00:58 remaining? 
            // If it's a countdown, full circle = full time. 
            // Let's just make it look like the screenshot.
            className="transition-all duration-1000 ease-linear"
          />
        </svg>
        <div className="absolute inset-0 flex flex-col items-center justify-center">
          <span className={cn(
            "text-3xl font-bold",
            isExpired ? "text-red-500" : "text-gray-800"
          )}>
            {isExpired ? "0s" : formatTime(timer.remainingTime)}
          </span>
          <span className={cn(
            "text-[10px] font-medium uppercase mt-1",
            isExpired ? "text-red-400" : "text-gray-400"
          )}>
            Remaining
          </span>
        </div>
      </div>

      {/* Bottom Icons/Controls */}
      <div className="w-full flex justify-between items-end mt-2">
        <Pin className="w-5 h-5 text-blue-700 fill-current" />
        
        <div className="flex flex-col items-center">
          <div className="w-10 h-10 rounded-full border-2 border-gray-300 flex items-center justify-center text-gray-400 mb-1">
            <timer.icon className="w-5 h-5" />
          </div>
        </div>

        <div className="flex flex-col items-end">
          <span className="text-xs text-blue-600 font-bold mb-2 cursor-pointer">EDIT</span>
        </div>
      </div>

       {/* Floating X Button */}
       <button className="absolute bottom-12 right-4 bg-blue-600 rounded-full p-1 text-white hover:bg-blue-700 shadow-md">
          <X className="w-4 h-4" />
        </button>
    </div>
  );
}

export function AlertsView() {
  const [showModal, setShowModal] = useState(true);

  return (
    <div className="h-full flex flex-col bg-gray-50 relative">
      {/* Top Header */}
      <div className="bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between shadow-sm z-10">
        <div className="flex items-center gap-4">
          <button className="flex items-center text-blue-500 text-lg font-medium">
            <ChevronLeft className="w-6 h-6" />
            Back
          </button>
          <Menu className="w-6 h-6 text-gray-500" />
        </div>

        <div className="flex flex-col items-center">
          <div className="flex items-center gap-2">
            <div className="bg-blue-600 p-1.5 rounded-md">
              <Timer className="w-5 h-5 text-white" />
            </div>
            <h1 className="text-xl font-bold text-blue-900">Timers</h1>
          </div>
          <div className="flex items-center gap-1 text-xs text-green-600 font-medium">
            <span>86016</span>
            <div className="w-2 h-2 bg-green-500 rounded-full" />
          </div>
        </div>

        <div className="flex items-center gap-4 text-blue-500 font-medium">
          <User className="w-6 h-6 text-gray-400" />
          <button className="flex items-center gap-1">
            <Plus className="w-5 h-5" />
            Add Timer
          </button>
        </div>
      </div>

      {/* Sub Header */}
      <div className="bg-gray-700 text-white px-6 py-2 flex items-center justify-between">
        <div className="flex-1" /> {/* Spacer */}
        <div className="font-medium">Today, December 15</div>
        <div className="flex-1 flex justify-end items-center gap-4">
          <div className="flex items-center gap-1">
             <Grid className="w-5 h-5 text-gray-300" />
             <List className="w-5 h-5 text-gray-500" />
          </div>
          <ArrowDownAZ className="w-5 h-5 text-blue-400" />
        </div>
      </div>

      {/* Grid Content */}
      <div className="flex-1 overflow-y-auto p-6">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
          {timersData.map(timer => (
            <TimerCard key={timer.id} timer={timer} />
          ))}
        </div>
      </div>

      {/* Alert Modal Overlay */}
      {showModal && (
        <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-[1px]">
          <div className="bg-black text-white rounded-xl shadow-2xl w-[600px] max-w-full overflow-hidden border border-gray-800">
            <div className="p-8 text-center space-y-6">
              <h2 className="text-3xl font-medium text-blue-500">Coffee - 2 hrs</h2>
              
              <div className="space-y-4 py-4">
                <p className="text-2xl font-light">Timer expired at 12:05 PM</p>
                <p className="text-2xl font-light">Please discard the coffee</p>
              </div>

              {/* TACT Image Tag Mockup */}
              <div className="flex justify-end">
                <span className="bg-gray-200 text-black text-[10px] px-1 rounded-sm opacity-50">
                  TACT_Img_Timer-Notification@2x
                </span>
              </div>

              <div className="grid grid-cols-3 gap-4 mt-8">
                <Button 
                  onClick={() => setShowModal(false)}
                  className="bg-blue-700 hover:bg-blue-600 text-white h-14 text-xl font-medium rounded-lg"
                >
                  Mute
                </Button>
                <Button 
                  onClick={() => setShowModal(false)}
                  className="bg-blue-600 hover:bg-blue-500 text-white h-14 text-xl font-medium rounded-lg"
                >
                  Restart
                </Button>
                <Button 
                  onClick={() => setShowModal(false)}
                  className="bg-blue-800 hover:bg-blue-700 text-white h-14 text-xl font-medium rounded-lg"
                >
                  Acknowledge
                </Button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}