#!/bin/bash
cd /root/skeen-frontend

# Fix all files: use type-only import and remove unused variables
for f in src/App.tsx src/pages/*.tsx; do
    # Fix import
    sed -i "s/import { FC } from 'react';/import type { FC } from 'react';/g" "$f"
    sed -i "s/import { FC, useState } from 'react';/import type { FC } from 'react';\nimport { useState } from 'react';/g" "$f"
done

# Fix Agenda: remove unused selectedDate
cat > src/pages/Agenda.tsx << 'AGENDA'
import type { FC } from 'react';

const Agenda: FC = () => {
  // Datos de ejemplo
  const citas = [
    { id: 1, hora: '09:00', paciente: 'Sofia Garcia', servicio: 'Consulta Dermatologica', estado: 'confirmada' },
    { id: 2, hora: '10:00', paciente: 'Maria Lopez', servicio: 'Tratamiento Facial Acne', estado: 'confirmada' },
    { id: 3, hora: '11:30', paciente: 'Ana Martinez', servicio: 'Peel Quimico', estado: 'pendiente' },
    { id: 4, hora: '14:00', paciente: 'Carmen Ruiz', servicio: 'Depilacion Laser', estado: 'confirmada' },
    { id: 5, hora: '16:00', paciente: 'Laura Hernandez', servicio: 'Consulta de Valoracion', estado: 'confirmada' },
  ];

  const getEstadoColor = (estado: string) => {
    switch (estado) {
      case 'confirmada': return 'bg-green-100 text-green-800';
      case 'pendiente': return 'bg-yellow-100 text-yellow-800';
      case 'completada': return 'bg-blue-100 text-blue-800';
      case 'cancelada': return 'bg-red-100 text-red-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  return (
    <div>
      <h1 className="text-3xl font-bold text-gray-800 mb-8">Agenda</h1>
      <div className="bg-white rounded-lg shadow">
        <div className="p-6 border-b">
          <div className="flex justify-between items-center">
            <h2 className="text-xl font-semibold">Citas del Dia</h2>
            <button className="bg-skeen-primary text-white px-4 py-2 rounded hover:bg-skeen-secondary transition">+ Nueva Cita</button>
          </div>
        </div>
        <div className="divide-y">
          {citas.map((cita) => (
            <div key={cita.id} className="p-6 flex items-center justify-between hover:bg-gray-50">
              <div className="flex items-center space-x-4">
                <div className="text-lg font-semibold text-gray-700 w-16">{cita.hora}</div>
                <div>
                  <p className="font-medium text-gray-800">{cita.paciente}</p>
                  <p className="text-sm text-gray-600">{cita.servicio}</p>
                </div>
              </div>
              <span className={`px-3 py-1 rounded-full text-sm font-medium ${getEstadoColor(cita.estado)}`}>{cita.estado}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Agenda;
AGENDA

echo "Fixed TypeScript files"