'use client';

/**
 * Delivery Templates Page
 * 
 * View and manage saved delivery templates
 */

import { useState } from 'react';
import { MobileLayout } from '../../../../components/mobile-layout';
import { useDeliveryTemplates, DeliveryTemplate } from '../../../../hooks/use-delivery-templates';
import { useRouter } from 'next/navigation';
import {
  Bookmark,
  Plus,
  Trash2,
  Clock,
  Star,
  Package,
  School,
  ChevronRight,
  Search,
  Loader2,
} from 'lucide-react';

function TemplateCard({ 
  template, 
  onUse, 
  onDelete 
}: { 
  template: DeliveryTemplate; 
  onUse: () => void; 
  onDelete: () => void;
}) {
  const formatDate = (ts: number) => {
    const date = new Date(ts);
    const now = new Date();
    const diffDays = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24));
    
    if (diffDays === 0) return 'Today';
    if (diffDays === 1) return 'Yesterday';
    if (diffDays < 7) return `${diffDays} days ago`;
    return date.toLocaleDateString();
  };

  return (
    <div className="rounded-xl border border-slate-100 bg-white p-4 shadow-sm">
      <div className="flex items-start justify-between gap-3">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <Bookmark className="h-4 w-4 text-emerald-600 flex-shrink-0" />
            <h3 className="font-semibold text-slate-900 truncate">{template.name}</h3>
          </div>
          
          {template.data.school_name && (
            <div className="mt-2 flex items-center gap-2 text-sm text-slate-600">
              <School className="h-4 w-4 text-slate-400" />
              <span className="truncate">{template.data.school_name}</span>
            </div>
          )}
          
          {template.data.commodity_name && (
            <div className="mt-1 flex items-center gap-2 text-sm text-slate-600">
              <Package className="h-4 w-4 text-slate-400" />
              <span className="truncate">{template.data.commodity_name}</span>
              {template.data.typical_quantity && (
                <span className="text-xs bg-slate-100 px-2 py-0.5 rounded-full">
                  ~{template.data.typical_quantity} units
                </span>
              )}
            </div>
          )}
          
          <div className="mt-2 flex items-center gap-3 text-xs text-slate-400">
            <span className="flex items-center gap-1">
              <Clock className="h-3 w-3" />
              {formatDate(template.lastUsedAt)}
            </span>
            {template.useCount > 0 && (
              <span className="flex items-center gap-1">
                <Star className="h-3 w-3" />
                Used {template.useCount}x
              </span>
            )}
          </div>
        </div>
        
        <div className="flex flex-col gap-2">
          <button
            onClick={onUse}
            className="flex items-center gap-1 rounded-lg bg-emerald-500 px-3 py-2 text-sm font-medium text-white hover:bg-emerald-600 transition-colors"
          >
            Use
            <ChevronRight className="h-4 w-4" />
          </button>
          <button
            onClick={onDelete}
            className="flex items-center justify-center p-2 rounded-lg text-slate-400 hover:text-red-500 hover:bg-red-50 transition-colors"
          >
            <Trash2 className="h-4 w-4" />
          </button>
        </div>
      </div>
    </div>
  );
}

export default function TemplatesPage() {
  const router = useRouter();
  const { 
    templates, 
    isLoaded, 
    frequentTemplates, 
    recentTemplates, 
    useTemplate, 
    deleteTemplate,
    searchTemplates 
  } = useDeliveryTemplates();
  
  const [searchQuery, setSearchQuery] = useState('');
  const [showConfirmDelete, setShowConfirmDelete] = useState<string | null>(null);

  const handleUseTemplate = (template: DeliveryTemplate) => {
    const used = useTemplate(template.id);
    if (used) {
      // Navigate to new delivery with template data
      const params = new URLSearchParams();
      if (template.data.school_id) params.set('school_id', template.data.school_id.toString());
      if (template.data.commodity_id) params.set('commodity_id', template.data.commodity_id.toString());
      if (template.data.typical_quantity) params.set('quantity', template.data.typical_quantity.toString());
      
      router.push(`/field-staff/new-delivery?${params.toString()}`);
    }
  };

  const handleDeleteTemplate = (id: string) => {
    deleteTemplate(id);
    setShowConfirmDelete(null);
  };

  const filteredTemplates = searchQuery ? searchTemplates(searchQuery) : templates;

  if (!isLoaded) {
    return (
      <MobileLayout>
        <div className="flex items-center justify-center min-h-[60vh]">
          <Loader2 className="h-8 w-8 animate-spin text-slate-400" />
        </div>
      </MobileLayout>
    );
  }

  return (
    <MobileLayout>
      <div className="pb-24">
        {/* Header */}
        <div className="sticky top-0 z-10 bg-gradient-to-b from-slate-50 to-transparent pb-4 pt-4 px-4">
          <div className="flex items-center justify-between mb-4">
            <div>
              <h1 className="text-2xl font-bold text-slate-900">Templates</h1>
              <p className="text-sm text-slate-500">Reuse common delivery patterns</p>
            </div>
            <button
              onClick={() => router.push('/field-staff/new-delivery')}
              className="flex items-center gap-1 rounded-full bg-emerald-500 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-emerald-600 transition-colors"
            >
              <Plus className="h-4 w-4" />
              New
            </button>
          </div>
          
          {/* Search */}
          <div className="relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="Search templates..."
              className="w-full rounded-xl border border-slate-200 bg-white py-3 pl-10 pr-4 text-sm focus:border-emerald-300 focus:outline-none focus:ring-2 focus:ring-emerald-100"
            />
          </div>
        </div>

        <div className="px-4 space-y-6">
          {/* Frequent Templates */}
          {!searchQuery && frequentTemplates.length > 0 && (
            <div>
              <div className="flex items-center gap-2 mb-3">
                <Star className="h-4 w-4 text-amber-500" />
                <h2 className="font-semibold text-slate-700">Frequently Used</h2>
              </div>
              <div className="space-y-3">
                {frequentTemplates.map((template) => (
                  <TemplateCard
                    key={template.id}
                    template={template}
                    onUse={() => handleUseTemplate(template)}
                    onDelete={() => setShowConfirmDelete(template.id)}
                  />
                ))}
              </div>
            </div>
          )}

          {/* All Templates */}
          <div>
            {!searchQuery && frequentTemplates.length > 0 && (
              <div className="flex items-center gap-2 mb-3">
                <Bookmark className="h-4 w-4 text-slate-400" />
                <h2 className="font-semibold text-slate-700">All Templates</h2>
              </div>
            )}
            
            {filteredTemplates.length > 0 ? (
              <div className="space-y-3">
                {filteredTemplates.map((template) => (
                  <TemplateCard
                    key={template.id}
                    template={template}
                    onUse={() => handleUseTemplate(template)}
                    onDelete={() => setShowConfirmDelete(template.id)}
                  />
                ))}
              </div>
            ) : (
              <div className="text-center py-12">
                <Bookmark className="h-12 w-12 mx-auto text-slate-200 mb-4" />
                <h3 className="font-semibold text-slate-700 mb-1">
                  {searchQuery ? 'No templates found' : 'No templates yet'}
                </h3>
                <p className="text-sm text-slate-500 mb-4">
                  {searchQuery 
                    ? 'Try a different search term'
                    : 'Save a delivery as a template for quick reuse'}
                </p>
                {!searchQuery && (
                  <button
                    onClick={() => router.push('/field-staff/new-delivery')}
                    className="inline-flex items-center gap-2 rounded-xl bg-emerald-500 px-4 py-2 text-sm font-medium text-white hover:bg-emerald-600 transition-colors"
                  >
                    <Plus className="h-4 w-4" />
                    Create First Delivery
                  </button>
                )}
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Delete Confirmation Modal */}
      {showConfirmDelete && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
          <div className="w-full max-w-sm rounded-2xl bg-white p-6">
            <h3 className="text-lg font-semibold text-slate-900">Delete Template?</h3>
            <p className="mt-2 text-sm text-slate-600">
              This action cannot be undone.
            </p>
            <div className="mt-6 flex gap-3">
              <button
                onClick={() => setShowConfirmDelete(null)}
                className="flex-1 rounded-xl border border-slate-200 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
              >
                Cancel
              </button>
              <button
                onClick={() => handleDeleteTemplate(showConfirmDelete)}
                className="flex-1 rounded-xl bg-red-500 py-2 text-sm font-medium text-white hover:bg-red-600"
              >
                Delete
              </button>
            </div>
          </div>
        </div>
      )}
    </MobileLayout>
  );
}