import { useState, useEffect, useCallback } from 'react';
import { useParams, useSearchParams, useNavigate, useLocation } from 'react-router-dom';
import { TagDetail, Package, PaginatedResponse, AccessLevel } from '../types';
import { listTags, getDownloadUrl, getPackage, getMyProjectAccess, createTag, UnauthorizedError, ForbiddenError } from '../api';
import { Breadcrumb } from '../components/Breadcrumb';
import { Badge } from '../components/Badge';
import { SearchInput } from '../components/SearchInput';
import { FilterChip, FilterChipGroup } from '../components/FilterChip';
import { DataTable } from '../components/DataTable';
import { Pagination } from '../components/Pagination';
import { DragDropUpload, UploadResult } from '../components/DragDropUpload';
import { useAuth } from '../contexts/AuthContext';
import './Home.css';
import './PackagePage.css';

function formatBytes(bytes: number): string {
  if (bytes === 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
}

function CopyButton({ text }: { text: string }) {
  const [copied, setCopied] = useState(false);

  const handleCopy = async (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    await navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <button className="copy-btn" onClick={handleCopy} title="Copy to clipboard">
      {copied ? (
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <polyline points="20 6 9 17 4 12" />
        </svg>
      ) : (
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
        </svg>
      )}
    </button>
  );
}

function PackagePage() {
  const { projectName, packageName } = useParams<{ projectName: string; packageName: string }>();
  const navigate = useNavigate();
  const location = useLocation();
  const [searchParams, setSearchParams] = useSearchParams();
  const { user } = useAuth();

  const [pkg, setPkg] = useState<Package | null>(null);
  const [tagsData, setTagsData] = useState<PaginatedResponse<TagDetail> | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [accessDenied, setAccessDenied] = useState(false);
  const [uploadTag, setUploadTag] = useState('');
  const [uploadSuccess, setUploadSuccess] = useState<string | null>(null);
  const [artifactIdInput, setArtifactIdInput] = useState('');
  const [accessLevel, setAccessLevel] = useState<AccessLevel | null>(null);
  const [createTagName, setCreateTagName] = useState('');
  const [createTagArtifactId, setCreateTagArtifactId] = useState('');
  const [createTagLoading, setCreateTagLoading] = useState(false);

  // Derived permissions
  const canWrite = accessLevel === 'write' || accessLevel === 'admin';

  // Get params from URL
  const page = parseInt(searchParams.get('page') || '1', 10);
  const search = searchParams.get('search') || '';
  const sort = searchParams.get('sort') || 'name';
  const order = (searchParams.get('order') || 'asc') as 'asc' | 'desc';

  const updateParams = useCallback(
    (updates: Record<string, string | undefined>) => {
      const newParams = new URLSearchParams(searchParams);
      Object.entries(updates).forEach(([key, value]) => {
        if (value === undefined || value === '' || (key === 'page' && value === '1')) {
          newParams.delete(key);
        } else {
          newParams.set(key, value);
        }
      });
      setSearchParams(newParams);
    },
    [searchParams, setSearchParams]
  );

  const loadData = useCallback(async () => {
    if (!projectName || !packageName) return;

    try {
      setLoading(true);
      setAccessDenied(false);
      const [pkgData, tagsResult, accessResult] = await Promise.all([
        getPackage(projectName, packageName),
        listTags(projectName, packageName, { page, search, sort, order }),
        getMyProjectAccess(projectName),
      ]);
      setPkg(pkgData);
      setTagsData(tagsResult);
      setAccessLevel(accessResult.access_level);
      setError(null);
    } catch (err) {
      if (err instanceof UnauthorizedError) {
        navigate('/login', { state: { from: location.pathname } });
        return;
      }
      if (err instanceof ForbiddenError) {
        setAccessDenied(true);
        setError('You do not have access to this package');
        setLoading(false);
        return;
      }
      setError(err instanceof Error ? err.message : 'Failed to load data');
    } finally {
      setLoading(false);
    }
  }, [projectName, packageName, page, search, sort, order, navigate, location.pathname]);

  useEffect(() => {
    loadData();
  }, [loadData]);

  // Keyboard navigation - go back with backspace
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Backspace' && !['INPUT', 'TEXTAREA'].includes((e.target as HTMLElement).tagName)) {
        e.preventDefault();
        navigate(`/project/${projectName}`);
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [navigate, projectName]);

  const handleUploadComplete = useCallback((results: UploadResult[]) => {
    const count = results.length;
    const message = count === 1 
      ? `Uploaded successfully! Artifact ID: ${results[0].artifact_id}`
      : `${count} files uploaded successfully!`;
    setUploadSuccess(message);
    setUploadTag('');
    loadData();
    
    // Auto-dismiss success message after 5 seconds
    setTimeout(() => setUploadSuccess(null), 5000);
  }, [loadData]);

  const handleUploadError = useCallback((errorMsg: string) => {
    setError(errorMsg);
  }, []);

  const handleCreateTag = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!createTagName.trim() || createTagArtifactId.length !== 64) return;

    setCreateTagLoading(true);
    setError(null);

    try {
      await createTag(projectName!, packageName!, {
        name: createTagName.trim(),
        artifact_id: createTagArtifactId,
      });
      setUploadSuccess(`Tag "${createTagName}" created successfully!`);
      setCreateTagName('');
      setCreateTagArtifactId('');
      loadData();
      setTimeout(() => setUploadSuccess(null), 5000);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to create tag');
    } finally {
      setCreateTagLoading(false);
    }
  };

  const handleSearchChange = (value: string) => {
    updateParams({ search: value, page: '1' });
  };

  const handleSortChange = (columnKey: string) => {
    const newOrder = columnKey === sort ? (order === 'asc' ? 'desc' : 'asc') : 'asc';
    updateParams({ sort: columnKey, order: newOrder, page: '1' });
  };

  const handlePageChange = (newPage: number) => {
    updateParams({ page: String(newPage) });
  };

  const clearFilters = () => {
    setSearchParams({});
  };

  const hasActiveFilters = search !== '';
  const tags = tagsData?.items || [];
  const pagination = tagsData?.pagination;

  const columns = [
    {
      key: 'name',
      header: 'Tag',
      sortable: true,
      render: (t: TagDetail) => <strong>{t.name}</strong>,
    },
    {
      key: 'version',
      header: 'Version',
      render: (t: TagDetail) => (
        <span className="version-badge">{t.version || '-'}</span>
      ),
    },
    {
      key: 'artifact_id',
      header: 'Artifact ID',
      render: (t: TagDetail) => (
        <div className="artifact-id-cell">
          <code className="artifact-id">{t.artifact_id.substring(0, 12)}...</code>
          <CopyButton text={t.artifact_id} />
        </div>
      ),
    },
    {
      key: 'artifact_size',
      header: 'Size',
      render: (t: TagDetail) => <span>{formatBytes(t.artifact_size)}</span>,
    },
    {
      key: 'artifact_content_type',
      header: 'Type',
      render: (t: TagDetail) => (
        <span className="content-type">{t.artifact_content_type || '-'}</span>
      ),
    },
    {
      key: 'artifact_original_name',
      header: 'Filename',
      className: 'cell-truncate',
      render: (t: TagDetail) => (
        <span title={t.artifact_original_name || undefined}>{t.artifact_original_name || '-'}</span>
      ),
    },
    {
      key: 'created_at',
      header: 'Created',
      sortable: true,
      render: (t: TagDetail) => (
        <div className="created-cell">
          <span>{new Date(t.created_at).toLocaleString()}</span>
          <span className="created-by">by {t.created_by}</span>
        </div>
      ),
    },
    {
      key: 'actions',
      header: 'Actions',
      render: (t: TagDetail) => (
        <a
          href={getDownloadUrl(projectName!, packageName!, t.name)}
          className="btn btn-secondary btn-small"
          download
        >
          Download
        </a>
      ),
    },
  ];

  if (loading && !tagsData) {
    return <div className="loading">Loading...</div>;
  }

  if (accessDenied) {
    return (
      <div className="home">
        <Breadcrumb
          items={[
            { label: 'Projects', href: '/' },
            { label: projectName!, href: `/project/${projectName}` },
          ]}
        />
        <div className="error-message" style={{ textAlign: 'center', padding: '48px 24px' }}>
          <h2>Access Denied</h2>
          <p>You do not have permission to view this package.</p>
          {!user && (
            <p style={{ marginTop: '16px' }}>
              <a href="/login" className="btn btn-primary">Sign in</a>
            </p>
          )}
        </div>
      </div>
    );
  }

  return (
    <div className="home">
      <Breadcrumb
        items={[
          { label: 'Projects', href: '/' },
          { label: projectName!, href: `/project/${projectName}` },
          { label: packageName! },
        ]}
      />

      <div className="page-header">
        <div className="page-header__info">
          <div className="page-header__title-row">
            <h1>{packageName}</h1>
            {pkg && <Badge variant="default">{pkg.format}</Badge>}
          </div>
          {pkg?.description && <p className="description">{pkg.description}</p>}
          <div className="page-header__meta">
            <span className="meta-item">
              in <a href={`/project/${projectName}`}>{projectName}</a>
            </span>
            {pkg && (
              <>
                <span className="meta-item">Created {new Date(pkg.created_at).toLocaleDateString()}</span>
                {pkg.updated_at !== pkg.created_at && (
                  <span className="meta-item">Updated {new Date(pkg.updated_at).toLocaleDateString()}</span>
                )}
              </>
            )}
          </div>
          {pkg && (pkg.tag_count !== undefined || pkg.artifact_count !== undefined) && (
            <div className="package-header-stats">
              {pkg.tag_count !== undefined && (
                <span className="stat-item">
                  <strong>{pkg.tag_count}</strong> tags
                </span>
              )}
              {pkg.artifact_count !== undefined && (
                <span className="stat-item">
                  <strong>{pkg.artifact_count}</strong> artifacts
                </span>
              )}
              {pkg.total_size !== undefined && pkg.total_size > 0 && (
                <span className="stat-item">
                  <strong>{formatBytes(pkg.total_size)}</strong> total
                </span>
              )}
              {pkg.latest_tag && (
                <span className="stat-item">
                  Latest: <strong className="accent">{pkg.latest_tag}</strong>
                </span>
              )}
            </div>
          )}
        </div>
      </div>

      {error && <div className="error-message">{error}</div>}
      {uploadSuccess && <div className="success-message">{uploadSuccess}</div>}

      {user && (
        <div className="upload-section card">
          <h3>Upload Artifact</h3>
          {canWrite ? (
            <div className="upload-form">
              <div className="form-group">
                <label htmlFor="upload-tag">Tag (optional)</label>
                <input
                  id="upload-tag"
                  type="text"
                  value={uploadTag}
                  onChange={(e) => setUploadTag(e.target.value)}
                  placeholder="v1.0.0, latest, stable..."
                />
              </div>
              <DragDropUpload
                projectName={projectName!}
                packageName={packageName!}
                tag={uploadTag || undefined}
                onUploadComplete={handleUploadComplete}
                onUploadError={handleUploadError}
              />
            </div>
          ) : (
            <DragDropUpload
              projectName={projectName!}
              packageName={packageName!}
              disabled={true}
              disabledReason="You have read-only access to this project and cannot upload artifacts."
              onUploadComplete={handleUploadComplete}
              onUploadError={handleUploadError}
            />
          )}
        </div>
      )}

      <div className="section-header">
        <h2>Tags / Versions</h2>
      </div>

      <div className="list-controls">
        <SearchInput
          value={search}
          onChange={handleSearchChange}
          placeholder="Filter tags..."
          className="list-controls__search"
        />
      </div>

      {hasActiveFilters && (
        <FilterChipGroup onClearAll={clearFilters}>
          {search && <FilterChip label="Filter" value={search} onRemove={() => handleSearchChange('')} />}
        </FilterChipGroup>
      )}

      <div className="data-table--responsive">
        <DataTable
          data={tags}
          columns={columns}
          keyExtractor={(t) => t.id}
          emptyMessage={
            hasActiveFilters
              ? 'No tags match your filters. Try adjusting your search.'
              : 'No tags yet. Upload an artifact with a tag to create one!'
          }
          onSort={handleSortChange}
          sortKey={sort}
          sortOrder={order}
        />
      </div>

      {pagination && pagination.total_pages > 1 && (
        <Pagination
          page={pagination.page}
          totalPages={pagination.total_pages}
          total={pagination.total}
          limit={pagination.limit}
          onPageChange={handlePageChange}
        />
      )}

      <div className="download-by-id-section card">
        <h3>Download by Artifact ID</h3>
        <div className="download-by-id-form">
          <input
            type="text"
            value={artifactIdInput}
            onChange={(e) => setArtifactIdInput(e.target.value.toLowerCase().replace(/[^a-f0-9]/g, '').slice(0, 64))}
            placeholder="Enter SHA256 artifact ID (64 hex characters)"
            className="artifact-id-input"
          />
          <a
            href={artifactIdInput.length === 64 ? getDownloadUrl(projectName!, packageName!, `artifact:${artifactIdInput}`) : '#'}
            className={`btn btn-primary ${artifactIdInput.length !== 64 ? 'btn-disabled' : ''}`}
            download
            onClick={(e) => {
              if (artifactIdInput.length !== 64) {
                e.preventDefault();
              }
            }}
          >
            Download
          </a>
        </div>
        {artifactIdInput.length > 0 && artifactIdInput.length !== 64 && (
          <p className="validation-hint">Artifact ID must be exactly 64 hex characters ({artifactIdInput.length}/64)</p>
        )}
      </div>

      {user && canWrite && (
        <div className="create-tag-section card">
          <h3>Create / Update Tag</h3>
          <p className="section-description">Point a tag at any existing artifact by its ID</p>
          <form onSubmit={handleCreateTag} className="create-tag-form">
            <div className="form-row">
              <div className="form-group">
                <label htmlFor="create-tag-name">Tag Name</label>
                <input
                  id="create-tag-name"
                  type="text"
                  value={createTagName}
                  onChange={(e) => setCreateTagName(e.target.value)}
                  placeholder="latest, stable, v1.0.0..."
                  disabled={createTagLoading}
                />
              </div>
              <div className="form-group form-group--wide">
                <label htmlFor="create-tag-artifact">Artifact ID</label>
                <input
                  id="create-tag-artifact"
                  type="text"
                  value={createTagArtifactId}
                  onChange={(e) => setCreateTagArtifactId(e.target.value.toLowerCase().replace(/[^a-f0-9]/g, '').slice(0, 64))}
                  placeholder="SHA256 hash (64 hex characters)"
                  className="artifact-id-input"
                  disabled={createTagLoading}
                />
              </div>
              <button
                type="submit"
                className="btn btn-primary"
                disabled={createTagLoading || !createTagName.trim() || createTagArtifactId.length !== 64}
              >
                {createTagLoading ? 'Creating...' : 'Create Tag'}
              </button>
            </div>
            {createTagArtifactId.length > 0 && createTagArtifactId.length !== 64 && (
              <p className="validation-hint">Artifact ID must be exactly 64 hex characters ({createTagArtifactId.length}/64)</p>
            )}
          </form>
        </div>
      )}

      <div className="usage-section card">
        <h3>Usage</h3>
        <p>Download artifacts using:</p>
        <pre>
          <code>curl -O {window.location.origin}/api/v1/project/{projectName}/{packageName}/+/latest</code>
        </pre>
        <p>Or with a specific tag:</p>
        <pre>
          <code>curl -O {window.location.origin}/api/v1/project/{projectName}/{packageName}/+/v1.0.0</code>
        </pre>
      </div>
    </div>
  );
}

export default PackagePage;